位置: 编程技术 - 正文
jQuery+CSS3折叠卡片式下拉列表框实现效果(javascript折叠菜单)
编辑：rootadmin推荐整理分享jQuery+CSS3折叠卡片式下拉列表框实现效果(javascript折叠菜单)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:html5折叠,jquery实现折叠菜单,html5折叠,javascript折叠菜单,html5折叠,html5折叠,css折叠效果,css折叠效果,内容如对您有帮助，希望把文章链接给更多的朋友！
jQuery下拉列表框特效将每一个列表项都制作为卡片的样式，打开和关闭它有打开和关闭百叶窗的感觉，效果非常不错，分享给大家。
简要教程HTML结构该下拉列表框特效的列表项使用一个无序列表来制作，用于切换打开和关闭状态的元素是一个超链接元素。
CSS样式a.toggle元素用于切换下拉列表的打开和关闭状态。为了制作点击时卡片上翻的效果，它被设置了transform-style: preserve-3d;属性。同时修改了转换的原点transform-origin: % 0%;。
但它处于激活状态的时候，它会沿X轴进行旋转，并使用:before和:after伪元素来制作角部三角形效果。
列表项在切换时只是简单的使用jQuery来修改它们的top、width和margin-left属性，使其显示和隐藏。并使用ease-out作为CSS动画过渡效果。
JavaScript
在jQuery代码中，setClosed()函数用于关闭所有的列表项，默认它们是处于关闭状态的。
然后监听.toggle元素的mousedown事件，该事件中切换列表的打开和关闭状态。
最后在每一个列表项被点击的时候，将该列表项的内容移动到第一项中，被关闭整个下来列表。
标签: javascript折叠菜单
本文链接地址:https://www.jiuchutong.com/biancheng/370469.html 转载请保留说明！
