旋转CSS箭头和javascript切换

发布时间：2020-12-14 22:52:50 所属栏目：资源来源：网络整理

导读：我有两个div横幅,有相应的CSS箭头.单击横幅时,javascript会在显示和隐藏下面的文本之间切换.同样,相应的箭头在文本显示时向下旋转,在隐藏文本时向后旋转. 现在,我希望我的第一个div横幅在页面首次加载时自动显示.但是,当我绘制CSS箭头时,由于div的填充,我无

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

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

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

我试过弄乱箭头的位置：

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

但我能做的最好的事情就是将tri0箭头向上推到h3标签的填充处,它不再向前移动.

有没有办法可以在toggleClass中设置切换标记,使其说第一个div横幅已经切换,后续点击使其无法切换？

最佳答案

您的问题发生是因为您的tris元素的边界.您在每个元素中显示不同的边框,这将使它们以不同的方式显示.

所以基本上我用相同的边框值,相同的旋转设置它们,当你的页面首次加载它时切换你的div并显示你的第一条消息.

请注意,一旦它们相等,就没有必要使用两个不同的类来切换元素状态.

Check in the Fiddle.

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

谢谢.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!