码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 手风琴效果

时间:2019-06-15 12:00:59      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:ext   头部   style   menu   获取   col   next   code   rap   

 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>

 

jQuery 手风琴效果

标签:ext   头部   style   menu   获取   col   next   code   rap   

原文地址:https://www.cnblogs.com/xiemin-minmin/p/11026805.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!