我有一个 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 形将出现在“单击此处...”字符串的左侧。
谢谢。
最佳答案
您的 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 这样的库。
关于javascript - 使用 Javascript/CSS 展开/折叠 div 时如何交换三 Angular 形图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2352168/