jQuery 手风琴效果

Posted 2022-01-11 xiemin-minmin

 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>