jquery实现折叠菜单效果【推荐】

本文主要介绍了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-600);//默认的背景 background-position: 100% 0px; background-repeat: no-repeat; } .con_ul li .title.act{ padding-right: 20px; background-image: url(images/top.png-600);//展开后的背景 background-position: 100% 0px; background-repeat: no-repeat; } .con{ background-color: #F4F4F4; display: none;//内容本分默认隐藏 padding: 5px; margin: 10px 0; }

html代码：使用ul li的布局本菜认为代码结构更简洁清晰

    标题 
 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 
  标题 
 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 
  标题 
 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

javascript代码：

以上就是jquery实现折叠菜单效果【推荐】的详细内容，更多请关注0133技术站其它相关文章！