javascript - 鼠标单击折叠箭头

我有鼠标单击时折叠行的示例:

jsfiddle.net/7bz5au97/

我想问你如何在问题的开头添加像这样的箭头，并在问题扩展时旋转它？

可以仅使用CSS完成此操作，还是需要添加JavaScript？

最佳答案

您几乎可以使用CSS完全做到这一点:

var arr = document.querySelector('.arrow');
arr.addEventListener('click', function(event) {
  event.target.classList.toggle('down');
});

.arrow {
  margin: 1em;
}

.arrow::before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: .5em solid transparent;
  border-left-color: gray;
  transform-origin: 0 50%;
  transition: transform .25s;
}

.arrow.down::before {
  transform: rotate(90deg);
  transition: transform .25s;
}

<div class="arrow"></div>