微信扫一扫打赏支持

js进阶 13-9/10 jquery如何实现三级列表

js进阶 13-9/10 jquery如何实现三级列表

打赏

 

一、总结

一句话总结：用的是定位，父标签相对定位，子标签就可以绝对定位了，绝对定位的孩子还是可以设置绝对定位。用toggle设置子菜单显示和隐藏。用的是jquery的hover方法。

 

1、鼠标滑过的时候最常设置的属性是什么？

透明度 opacity

 

2、如何让一级菜单下的二级菜单显示而三级菜单不显示？

.menu>li:hover>ul{display:none}
直接选择孩子，而不要选择子辈
而且注意这里是li:hover，也就是被鼠标悬浮的那个li的孩子ul(下级菜单)

 

3、如何实现被鼠标悬浮的那个li的孩子ul(下级菜单)显示出来？

.menu>li:hover>ul{display:none}
而且注意这里是li:hover

也可以直接用jquery的hover方法

47       $('.menu li').hover(function(){
48         $(this).children('ul').toggle()
49       })

 

4、如何滑动二级菜单让三级菜单显示出来？

注意这里用到了多个li:hover

21       .menu>li:hover>ul>li:hover>ul{display: block;}*/

 

5、元素的显示和隐藏切换用什么？

toggle

 

6、三级菜单的本质是什么？

元素的显示和隐藏 + 元素的定位

 

 

二、jquery如何实现三级列表

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       a{color: #fff;text-decoration: none;}
12       .menu{background: orange;height: 30px;line-height: 30px;}
13       .menu li{list-style-type: none;float: left; position: relative;}
14       .menu li a{display: block;height: 30px;float: left;margin-left: 10px}
15       .menu li ul{position: absolute;display: none;}
16       .first{top: 30px}
17       .first li a{width: 100px;background: rgba(100,50,30,0.6)}
18       .first li a:hover{width: 100px;background: rgba(100,50,30,0.8)}
19       .first_2{left: 100px}
20      /* .menu>li:hover>ul{display: block;}
21       .menu>li:hover>ul>li:hover>ul{display: block;}*/
22 
23   </style>
24 </head>
25 <body>
26     <ul class="menu">
27       <li><a href="#">菜单一</a>
28         <ul  class="first">
29           <li><a href="#">菜单一</a></li>
30           <li><a href="#">菜单二</a></li>
31           <li><a href="#">菜单三</a></li>
32           <li><a href="#">菜单四<span>▶</span></a>
33               <ul class="first_2">
34                 <li><a href="#">菜单一</a></li>
35                 <li><a href="#">菜单二</a></li>
36                 <li><a href="#">菜单三</a></li>
37                 <li><a href="#">菜单四</a></li>
38               </ul>
39           </li>
40         </ul>
41       </li>
42       <li><a href="#">菜单二</a></li>
43       <li><a href="#">菜单三</a></li>
44       <li><a href="#">菜单四</a></li>
45     </ul>
46     <script>
47       $('.menu li').hover(function(){
48         $(this).children('ul').toggle()
49       })
50     </script>
51 </body>
52 </html>
复制代码

 

 

 
posted @   范仁义  阅读(566)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类
侧边栏
打赏
点击右上角即可分享
微信分享提示
SQL AI 助手