javascript - 使用 Javascript/CSS 展开/折叠 div 时如何交换三 Angular 形图标

Question

我有一个 div，当用户单击一段文本时，我想在显示或不显示之间切换。我有一个 javascript 函数可以打开或关闭 div。那很好用。我不知道该怎么做是根据 div 是否打开，有一个指向右侧或下方的三 Angular 形。

我的 HTML 看起来像这样:

<a onclick="toggleDiv('myDiv');">Click here to expand or close div</a>
<div id="myDiv" style="display:none">
   ...
</div>

我如何添加其中一个三 Angular 形并让它指向正确的方向，最好只使用 HTML、Javascript 和 CSS？三 Angular 形将出现在“单击此处...”字符串的左侧。

谢谢。

Answer 1

您的 toggleDiv() 函数在这里看到会很有帮助。无论如何，您应该只向您的 div 添加一个类，也许是“active”或“open”。

然后在您的 CSS 中，执行如下操作:

div {
  background: url("downarrow.png") top left no-repeat; 
}

div.open {
  background: url("uparrow.png") top left no-repeat; 
}

更新

您也可以考虑将 JS 完全移出 HTML，您可以从 JS 观察元素上的点击事件，然后根据类的状态添加或删除类。也许考虑使用像 jQuery 这样的库。