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><jQuery> <选择器> 六. 筛选选择器
原文地址：http://www.cnblogs.com/ZeroHour/p/8046949.html