jquery怎么实现折叠菜单效果(jquery,开发技术)

这是一个简单的折叠框效果实现，核心内容jQ库里的slideToggle()方法

效果图如下：

css代码：

.con_ul{padding:0;margin:0;overflow:auto;}.con_ulli{list-style:none;padding:10px;margin:0;border-bottom:1pxsolid#CCCCCC;}.con_ulli.title{padding-right:20px;background-image:url(images/drop_1fcaf417.png);//默认的背景background-position:100%0px;background-repeat:no-repeat;}.con_ulli.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:10px0;}

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

<ulclass="con_ul"><li><divclass="title">标题</div><divclass="con">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></li><li><divclass="title">标题</div><divclass="con">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></li><li><divclass="title">标题</div><divclass="con">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div></li></ul>

javascript代码：

<scripttype="text/javascript"src="js/jquery-1.10.1.min.js"></script><script>$('.con_ulli.title').click(function(){$(this).toggleClass('act');//获取当前点击对象，切换act类，达到切换背景箭头的效果$(this).next().slideToggle();/获取当前点击对象的下一个兄弟级，实现折叠效果切换})</script>