javascript - CSS 箭头的旋转和 javascript 切换

Question

我有两个具有相应 CSS 箭头的 div 横幅。单击横幅时，javascript 在显示和隐藏下面的文本之间切换。同样，相应的箭头在文本显示时向下旋转，在文本隐藏时向后旋转。

现在，我希望我的第一个 div 横幅在页面首次加载时自动显示。但是，当我绘制 CSS 箭头时，由于 div 的填充，我无法使第一个 div 中的箭头与后续 div 中的箭头相同并正确排列。

http://jsfiddle.net/nVuQ2/1/

我试过弄乱箭头的位置:

.tri0 {
    margin-left: 20px;
    margin-top: 5px;
}

但我能做的最好的事情就是将 tri0 箭头向上推到 h3 标记的填充处，它不会再往前推了。

有没有一种方法可以让我在 toggleClass 中设置一个切换标志，让它说第一个 div 横幅已经切换并且随后的点击使其取消切换？

Answer 1

您的问题是由于 tri 元素的 border 引起的。您在每个元素中显示不同的边框，这将使它们以不同的方式显示。

所以基本上我将它们设置为相同的边框值、相同的旋转，并且当您的页面首次加载时它会切换您的 div 并显示您的第一条消息。

请注意，只要两个不同的类相等，就不必使用两个不同的类来切换元素状态。

Check in the Fiddle .

不确定这是否是您想要的解决方案。但我希望这对您有所帮助。

谢谢。