Jquery点击事件隐藏显示菜单

显示的效果就是这样，点击菜单，显示自己菜单下的内容，其他菜单下的都隐藏

html代码如下

 1 <div>
 2      <ul class="menu">
 3       <li class="leav">
 4         <a href="#">衬衫</a>
 5         <ul class="leave">
 6             <li>
 7                 <a href="javascript:void(0)">短袖衬衫</a>
 8                 <a href="javascript:void(0)">长袖衬衫</a>
 9                 <a href="javascript:void(0)">无袖衬衫</a>
10                 <a href="javascript:void(0)">黄袖衬衫</a>
11                 <a href="javascript:void(0)">蓝袖衬衫</a>
12                 <a href="javascript:void(0)">红袖衬衫</a>
13             </li>
14         </ul>
15       </li>
16       <li class="leav">
17       <a href="#">裤子</a>
18         <ul class="leave">
19             <li>
20                 <a href="javascript:void(0)">短袖裤子</a>
21                 <a href="javascript:void(0)">年轻晨曦</a>
22                 <a href="javascript:void(0)">啊睡觉的</a>
23                 <a href="javascript:void(0)">阿什顿飞</a>
24                 <a href="javascript:void(0)">品牌名牌</a>
25                 <a href="javascript:void(0)">终极奢侈</a>
26             </li>
27         </ul>
28         </li>
29        <li class="leav">
30         <a href="#">名牌</a>
31         <ul class="leave">
32             <li>
33                 <a href="javascript:void(0)">内裤内衣</a>
34                 <a href="javascript:void(0)">床单被罩</a>
35                 <a href="javascript:void(0)">长衫西裤</a>
36                 <a href="javascript:void(0)">阿玛尼</a>
37                 <a href="javascript:void(0)">京东折扣</a>
38                 <a href="javascript:void(0)">国外名牌</a>
39             </li>
40         </ul>
41         </li>
42         <li class="leav">
43         <a href="#">玩具</a>
44         <ul class="leave">
45             <li>
46                 <a href="javascript:void(0)">飞机</a>
47                 <a href="javascript:void(0)">枪</a>
48                 <a href="javascript:void(0)">大炮</a>
49                 <a href="javascript:void(0)">原子弹</a>
50                 <a href="javascript:void(0)">象棋</a>
51                 <a href="javascript:void(0)">国外名牌</a>
52             </li>
53         </ul>
54         </li>
55         <li class="leav">
56         <a href="#">手机</a>
57         <ul class="leave">
58             <li>
59                 <a href="javascript:void(0)">联想</a>
60                 <a href="javascript:void(0)">酷派</a>
61                 <a href="javascript:void(0)">华为</a>
62                 <a href="javascript:void(0)">中兴</a>
63                 <a href="javascript:void(0)">小米</a>
64                 <a href="javascript:void(0)">魅族</a>
65             </li>
66         </ul>
67         </li>
68         <li class="leav">
69         <a href="#">电脑</a>
70         <ul class="leave">
71             <li>
72                 <a href="javascript:void(0)">联想</a>
73                 <a href="javascript:void(0)">宏基</a>
74                 <a href="javascript:void(0)">苹果</a>
75                 <a href="javascript:void(0)">华硕</a>
76                 <a href="javascript:void(0)">戴尔</a>
77                 <a href="javascript:void(0)">国外名牌</a>
78             </li>
79         </ul>
80         </li>
81        </ul>
82     </div>

只需要一行jquery代码就能完成那个操作

$(this).next().show().parent().siblings().children("a").next().hide()

点击事件由上层a标签触发$(".leav > a")

a标签下的元素都显现，然后返回父元素，就是.leav，再找到.leav的兄弟元素中的子元素（a）的，再进行隐藏。