jquery 控制下拉列表

[三杯茶]

<div class="sidenav">
<ul>
<li class="li_btn"><a href="#" class="a_click">超级链接</a>
<ul class="li_open">
<li><a href="#">展开链接</a></li>
<li><a href="#">展开链接</a></li>
<li><a href="#">展开链接</a></li>
</ul>
</li>
</ul>
</div>

以上为结构

样式如下：
#content .sidenav{ width:131px; height:auto; background:; position:absolute; left:0; top:0; box-shadow: 0 0 5px #ccc}
#content .sidenav .li_btn{ width:131px; height:auto; line-height:51px; background:; text-align:center; border-bottom:1px #ccc solid; box-sizing:border-box;}
#content .sidenav .li_open{ display:none; width:131px; height:auto; background:#eee;}
#content .sidenav .li_open li{ width:131px; height:px; line-height:51px; background:; text-align:center; border-bottom:1px #ccc solid; box-sizing:border-box;}



下面为jq代码：
$('#content .sidenav .li_btn').click(function(e) {
var num = $(this).index();
$('#content .sidenav .li_open').eq(num).toggle();
});

实现了点击名为“超级链接”的部分 显示和隐藏次级导航（展开链接部分），但在显示出来的状态下点击次级导航上的展开链接时次级导航全部隐藏了 怎么破

[Null_Reference]

原因是因为你点击里面的触发了.li_btn 这个元素的事件，解决办法笨的方法就是把里面的 li_open也加个点击事件，事件里面阻止点击（return false）;另外就是改变页面布局样式了

[Null_Reference]

<li ><a href="#" class="a_click li_btn">超级链接</a>

改成这样