微信扫一扫打赏支持

js进阶 13-11/12 jquery如何实现折叠导航

js进阶 13-11/12 jquery如何实现折叠导航

一、总结

一句话总结：还是用的slideToggle滑动效果，并且这一个展开时，所有兄弟都关闭。

 

1、文字缩进怎么设置？

感觉设置margin和padding都行，其实也可以设置text-indent

14         text-indent: 2em; font-weight: normal;

 

2、二级菜单除第一个之外全部隐藏怎么写？

用not方法，不选第一个

$('.nav>ul:not(:first)').hide()

 

 

二、jquery如何实现折叠导航

1、相关知识

折叠导航栏

案例描述：和练习1类似，是一个竖向的折叠导航，使用了滑动动画效果。

 

 

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6   <meta charset="UTF-8">
 7   <title>演示文档</title>
 8   <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9   <style type="text/css">
10     *{padding: 0;margin:0;}
11     .nav{width: 300px;margin:10px;}
12     .nav h1{
13         height: 30px;line-height: 30px;
14         text-indent: 2em; font-weight: normal;
15         font-size: 12px; color: #fff;
16         background: rgb(250,0,0);
17         margin-bottom: 1px;
18         cursor: pointer;
19     }
20     .nav ul{list-style-type: none;}
21     .nav ul li{
22         font-size: 14px;
23         padding: 5px 2em;text-indent: 2em;
24         cursor: pointer;
25     }
26     /*ul{display: none;}*/
27   /*.nav>ul>li>ul{display: none;}*/
28   </style>
29 </head>
30 <body>
31     <div class="nav">
32         <h1>一级导航菜单</h1>
33             <ul>
34                 <li>二级导航菜单</li>
35                 <li>二级导航菜单</li>
36             </ul>
37         <h1>一级导航菜单</h1>
38             <ul>
39                 <li>二级导航菜单</li>
40                 <li><span class="tit">▶</span>二级导航菜单
41                 <ul>
42                     <li>三级导航菜单</li>
43                     <li>三级导航菜单</li>
44                 </ul>
45                 </li>
46                 <li>二级导航菜单</li>
47                 <li>二级导航菜单</li>
48             </ul>
49         <h1>一级导航菜单</h1>
50             <ul>
51                 <li>二级导航菜单</li>
52                 <li>二级导航菜单</li>
53                 <li>二级导航菜单</li>
54             </ul>
55         <h1>一级导航菜单</h1>
56              <ul>
57                 <li>二级导航菜单</li>
58                 <li>二级导航菜单</li>
59             </ul>
60     </div>
61    <script>
62    //.siblings()    获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
63    //.next()  获得匹配元素集合中每个元素紧邻的同辈元素。
64    //.children()  获得匹配元素集合中每个元素的所有子元素。
65            $(function(){
66                $('.nav>ul:not(:first)').hide()
67                $('.nav>h1').click(function(){
68                    $(this).next('ul').slideToggle().siblings('ul').slideUp();
69                })
70         $('.nav>ul>li').click(function(){
71           var dis=$(this).children('ul').css('display')
72           // alert(dis)
73           if(dis=='none'){
74             $('.tit').html('◀')
75           }else{
76             $('.tit').html('▶')
77           }
78           $(this).children('ul').slideToggle()
79         })
80 
81         
82 
83            })
84    </script>    
85 </body>
86 </html>

 

 

 

 
posted @ 2018-07-20 00:55  范仁义  阅读(469)  评论(0)  编辑  收藏  举报