jquery实现折叠菜单效果实例讲解

 .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;
 }

 <ul class="con_ul">
 <li>
 <p class="title">
 标题
 </p>
 <p class="con">
 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p> 
 </li>
 <li>
 <p class="title">
 标题
 </p>
 <p class="con">
 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p> 
 </li>
 <li>
 <p class="title">
 标题
 </p>
 <p class="con">
 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p> 
 </li>
 </ul>

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