<jQuery> <选择器> 六. 筛选选择器 

 1 <!DOCTYPE html>
 2 <html lang="cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 
 8 <script src="jquery-2.1.1.min.js"></script>
 9 <script>
10     $(function () {
11         // 筛选选择器
12         // 下拉菜单效果
13         // 给li注册鼠标经过事件
14         $(".wrap>ul>li").mouseover(function () {
15             // 获取所有子标签, 并且标签名还得是ul, 让其展示
16             $(this).children("ul").show();
17         });
18         // 给li注册鼠标离开事件
19         $(".wrap>ul>li").mouseout(function () {
20             // 获取所有子标签, 并且标签名还得是ul, 让其隐藏
21             $(this).children("ul").hide();
22         });
23 
24         // 突出展示效果
25         // 注册事件, 鼠标在该标签上时
26         $(".wrap>ul>li").mouseenter(function () {
27             // 设置标签样式, 找到除自己本身其它节点的兄弟, 设置其它兄弟的样式
28             $(this).css("opacity", "1").siblings().css("opacity", "0.4");
29         });
30 
31         // 注册事件, 鼠标离开该标签
32         $(".wrap").mouseleave(function () {
33             $(".wrap>ul>li").css("opacity", 1);
34         })
35     });
36 
37 </script>
38 <body>
39 <div class="wrap">
40 <ul>
41     <li>
42         <a href="javascript:void(0)">一级菜单1</a>
43         <ul>
44             <li><a href="javascript:void(0)">一级菜单11</a></li>
45             <li><a href="javascript:void(0)">一级菜单12</a></li>
46             <li><a href="javascript:void(0)">一级菜单13</a></li>
47         </ul>
48     </li>
49     <li>
50         <a href="javascript:void(0)">一级菜单2</a>
51         <ul>
52             <li><a href="javascript:void(0)">一级菜单21</a></li>
53             <li><a href="javascript:void(0)">一级菜单22</a></li>
54             <li><a href="javascript:void(0)">一级菜单23</a></li>
55         </ul>
56     </li>
57     <li>
58         <a href="javascript:void(0)">一级菜单3</a>
59         <ul>
60             <li><a href="javascript:void(0)">一级菜单31</a></li>
61             <li><a href="javascript:void(0)">一级菜单32</a></li>
62             <li><a href="javascript:void(0)">一级菜单33</a></li>
63         </ul>
64     </li>
65 </ul>
66 </div>
67 </body>
68 </html>

 

posted @ 2017-12-16 16:38  云淡风轻我爱编程  阅读(251)  评论(0)    收藏  举报