jQuery 手风琴效果

 1  //点击标题弹出对应的div 再次点击则隐藏
 2 
 3             //jQuery只能获取行内的样式 没法获取头部的样式
 4             $(".parentWrap .menuGroup span.groupTitle").click(function() {
 5                 if ($(this).attr("title") == "aa") {
 6                     $(this).next("div").show();
 7                     $(this).attr("title", "");
 8                 } else {
 9                     $(this).next("div").hide();
10                     $(this).attr("title", "aa");
11                 }
12             });

html代码:给它一个属性用于判断

 1 <ul class="parentWrap">
 2         <li class="menuGroup">
 3             <span class="groupTitle" title="aa">标题1</span>
 4             <div>我是弹出来的div1</div>
 5         </li>
 6         <li class="menuGroup">
 7             <span class="groupTitle" title="aa">标题2</span>
 8             <div>我是弹出来的div2</div>
 9         </li>
10         <li class="menuGroup">
11             <span class="groupTitle" title="aa">标题3</span>
12             <div>我是弹出来的div3</div>
13         </li>
14         <li class="menuGroup">
15             <span class="groupTitle" title="aa">标题4</span>
16             <div>我是弹出来的div4</div>
17         </li>
18     </ul>

猜你喜欢

转载自www.cnblogs.com/xiemin-minmin/p/11026805.html