【求助】JQuery编写导航条的问题

自己弄了个导航菜单，为了实现点击“隐藏/显示”的效果，使用了toggle()函数，代码如下：

html文件：
<ul id="selected-plays" class="clearfix">
  <li id="bar1">aaa
    <ul id="sub1">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
  </li>
  <li id="bar2">bbb
    <ul id="sub2">
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
  </li>
  <li id="bar3">ccc
  </li>
</ul>


js文件：
$(document).ready(function() {

      $('#sub1').hide();
      $('#sub2').hide();
      $('#bar1').click(function()    {
      $('#sub2').hide();
      $('#sub1').toggle();
  });

  $('#bar2').click(function()    {
      $('#sub1').hide();      
      $('#sub2').toggle();
  });
  $('#bar3').click(function()    {
      $('#sub2').hide();
      $('#sub1').hide();      
  });
});


“显示/隐藏”的效果实现了，但是遇到个新的问题，当对子导航条加入链接后（如对“aaa”导航条下的“111”子导航条设置链接），一旦点击了这个子导航条，后，整个“sub1”的区域就自动隐藏起来了，请问该如何改变这个情况呢？

另外，我希望能够将子导航的区域显示在上级导航条的右侧，而不是下方，这个该如何设置呢？

谢谢！！

是不是冒泡了？

看来是冒泡了，你用e.target==this来判断这是点击当前元素触发的事件，还是冒泡得来的事件