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>