CSS箭头的旋转和javascript切换答案

【问题标题】：Rotation of CSS arrow and javascript togglingCSS箭头的旋转和javascript切换
【发布时间】：2013-12-24 10:46:21
【问题描述】：

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

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

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

我试过弄乱箭头的位置：

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

但我能做的最好的就是将tri0 箭头向上推到h3 标记的填充处，它不会走得更远。

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您的问题是由于您的tris 元素中的border 而发生的。您在每个元素中显示不同的边框，这将使它们以不同的方式出现。

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

请注意，一旦它们相等，就不必有两个不同的类来切换元素状态。

Check in the Fiddle。

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

谢谢。

【讨论】：

喂。我不知道为什么我一开始没有想到这样做。谢谢！
这是最出色的工作，但我不得不承认我不完全理解......为什么你不需要 2 个类来切换，一个在一个方向上切换，一个在另一个方向上切换?

【解决方案2】：

尝试使用绝对定位而不是浮动，这样可以确保箭头始终在中间对齐。您将父 div 设置为 position:relative，将箭头设置为 position:absolute;

代码将如下所示 -

.slide0, .slide1 {
    position:relative;
}

.tri0, .tri1 {
    position:absolute;
    top:0;
    bottom:0;
    margin:auto 0;
}
.tri0 {
    right:5px;
}
.tri1 {
    right:10px;
}

编辑： 哎呀，我意识到我没有补偿旋转的箭头。因为 10px 的边框使其有效宽度为 10px，所以将 .tri1 定位为 right:10px 。更新了上面的代码，在这里更新 fiddle。

Updated Fiddle

【讨论】：