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

您的问题之所以发生，是因为您的border是tri的元素。您将在每个元素中显示不同的边框，这将使它们以不同的方式显示。

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

注意，在元素状态相等之后，不需要有两个不同的类来切换元素状态。

检查Fiddle。

不知道这是不是你想要的解决方案。但我希望这对你有帮助。

谢谢。

Answer 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;
}

编辑：呜呜，我意识到我没有补偿旋转的箭头。因为10 it边框有效地使其10 it宽，所以将.tri1定位为右:10 it。以上更新代码，并在这里更新小提琴。

更新Fiddle