css点击改变箭头方向

CSS点击改变箭头方向是前端开发中经常遇到的需求，利用CSS可以轻松实现该功能。

.arrow {
  
  display: inline-block;
  
  width: 0;
  
  height: 0;
  
  border: 5px solid transparent;
}
.arrow-down {
  
  border-top-color: #333;
  
  margin-bottom: 5px;
}
.arrow-up {
  
  border-bottom-color: #333;
  
  margin-top: 5px;
}
 

以上CSS代码实现了一个箭头的样式，接下来就可以通过JS来操作箭头的显示效果。

const arrow = document.querySelector('.arrow');
arrow.addEventListener('click', function() {
  
  arrow.classList.toggle('arrow-up');
  
  arrow.classList.toggle('arrow-down');
}
);
 

JS代码实现了当该箭头被点击时，将其样式从箭头往下变为箭头往上的效果，反之亦然。

通过上述CSS和JS代码，就可以轻松实现点击改变箭头方向的功能。