javascript - 当您在Javascript中单击V形时，如何将V形从指向右变为指向下？

Question

我从 https://fontawesome.com/icons/chevron-down 获取 chevron-down 图标，从https://fontawesome.com/icons/chevron-right获取chevron-right 图标。我不确定从哪里开始制作，这样当您单击 SHOW LESS 文本时，它将变为 SHOW MORE 并且 V 形将变为 V 形右。

另外，当您单击内容时，如何使内容也显示在 SHOW LESS 下方？

标签： javascript

Answer 1

使用 HTML5details元素，它

1. 是这里语义正确的元素，
2. 不需要任何Javascript，
3. 作为 HTML 标准的一部分，与屏幕阅读器兼容，
4. 甚至不需要很棒的字体，因为它已经带有一个 V 字形，可以完全满足您的要求。

.restyled summary { text-transform: uppercase; }
.restyled summary::marker { content: "› "; }

.restyled summary::-webkit-details-marker { content: "› "; }

<details>
  <summary>Show more</summary>
  <p>More info about the details.</p>
</details>

<details class="restyled">
  <summary>Show more</summary>
  <p>More info about the details.</p>
</details>

https://developer.mozilla.org/de/docs/Web/HTML/Element/details