javascript - 在Javascript中单击时，如何将人字形从指向右转到指向下？

我从https://fontawesome.com/icons/chevron-down获取人字形向下图标，从https://fontawesome.com/icons/chevron-right获得人字形右图标。我不确定从哪里开始制作它，因此当您单击“ SHOW LESS”文本时，它将更改为“ SHOW MORE”，并且人字形将变为人字形右。

另外，如何制作内容，使内容在单击时也显示在“ SHOW LESS”下方？

最佳答案

使用HTML5 details元素，


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

.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