旋转的CSS箭头和JavaScript切换

我有两个div横幅有相应的CSS箭头。当点击横幅时，JavaScript会在显示和隐藏下面的文本之间切换。同样，当文本被显示时，各个箭头向下旋转，当文本被隐藏时，各个箭头向下旋转。旋转的CSS箭头和JavaScript切换

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

我试着用箭头的位置搞乱：

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

，但我能做的最好是推tri0箭头直至h3标签的填充和它赢得再走得更远。

有没有一种方法可以在toggleClass中设置一个切换标志，以表明第一个div横幅已经被切换并且随后的点击使其不被切换？

来源

2013-12-24 noblerare

你的问题，是因为你的tri小号元素的border的。您在每个元素中显示不同的边框，这会使它们以不同的方式出现。

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

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

Check in the Fiddle。

不知道这是否是您想要的解决方案。但我希望这可以帮助你。

谢谢。

来源

2013-12-24 02:12:03

Oy。我不知道为什么我没有想到首先这样做。谢谢！ – noblerare

很高兴帮助你:) –

这是工作最出色，但我不得不承认我不完全理解......为什么你不需要2班切换，一个切换在一个方向，一个在另一个？ – james

-1

尝试使用绝对定位而不是浮动，这样可以确保箭头总是在中间对齐。你父格设置为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替换为10px即可。更新上面的代码，并在这里更新小提琴。

Updated Fiddle

来源

2013-12-24 01:57:20

旋转的CSS箭头和JavaScript切换

回答

相关问题