js右箭头点击变为下箭头

你可以使用CSS来实现这个效果。首先，在HTML中添加一个元素，例如一个按钮，然后给它添加一个类名或ID来识别它。然后，使用CSS的伪类选择器来定义箭头的样式：

.btn {
  width: 100px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.btn:after {
  content: '\25BC';
  display: inline-block;
  margin-left: 5px;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.btn.active:after {
  transform: rotate(-90deg);
}

这段CSS代码使用了伪类选择器 `:after` 来在按钮的右侧添加箭头。箭头的样式是通过 `content` 属性设置的。`display: inline-block` 和 `margin-left: 5px` 属性用于使箭头与按钮之间留有一定的空隙。`transform: rotate(90deg)` 属性用于将箭头旋转90度，使其变成一个向右的箭头。`transition: transform 0.3s ease` 属性用于添加一个平滑的过渡效果。最后，使用 `.btn.active:after` 选择器来定义当按钮被点击时箭头的旋转方向。