本文主要介绍了jquery实现折叠菜单效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。
这是一个简单的折叠框效果实现，核心内容jQ库里的slideToggle()方法
效果图如下：
css代码：
.con_ul{ padding: 0; margin: 0; overflow: auto; } .con_ul li{ list-style: none; padding: 10px; margin: 0; border-bottom: 1px solid #CCCCCC; } .con_ul li .title{ padding-right: 20px; background-image: url(images/drop_1fcaf417.png);//默认的背景 background-position: 100% 0px; background-repeat: no-repeat; } .con_ul li .title.act{ padding-right: 20px; background-image: url(images/top.png);//展开后的背景 background-position: 100% 0px; background-repeat: no-repeat; } .con{ background-color: #F4F4F4; display: none;//内容本分默认隐藏 padding: 5px; margin: 10px 0; }
登录后复制
html代码：使用ul li的布局本菜认为代码结构更简洁清晰
-
标题
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
-
标题
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
-
标题
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
登录后复制
javascript代码：
$('.con_ul li .title').click(function(){ $(this).toggleClass('act');//获取当前点击对象，切换act类，达到切换背景箭头的效果 $(this).next().slideToggle();/获取当前点击对象的下一个兄弟级，实现折叠效果切换 })
登录后复制
相关推荐：
slideToggle+slideup实现手机端折叠菜单效果实例代码
纯CSS实现的圆角折叠菜单特效代码_html/css_WEB-ITnose
js 全兼容可高亮二级缓冲折叠菜单_导航菜单
以上就是jquery实现折叠菜单效果实例讲解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2789669.html
