使jQuery显示正确的子菜单，当存在

Question

这是我的第一篇文章，所以我提前道歉，任何不良的做法。我一直在寻找一段时间，但还没有遇到一个满足我需求的解决方案 - 也许我只是做错了。但在这里：

我正在建设一个网站使用大卡特尔CMS和第一次钻研jQuery。我正在尝试创建一个水平和居中的导航菜单，在适当的位置显示下面的子菜单。我很好用html和CSS，但我正在努力与jQuery。

的加价如下：

<nav> 
    <ul id="mainNav"> 
     <li><a href="expand-the-sub-menu">Option 1</a> 
      <ul id="option1Nav"> 
       <li><a href="somewhere">Option 1 Link 1</a></li> 
       <li><a href="somewhere">Option 1 Link 2</a></li> 
       <li><a href="somewhere">Option 1 Link 3</a></li> 
       <li><a href="somewhere">Option 1 Link 4</a></li> 
       <li><a href="somewhere">Option 1 Link 5</a></li> 
      </ul> 
     </li> 
     <li><a href="expand-the-sub-menu">Option 2</a> 
      <ul id="option2Nav"> 
       <li><a href="somewhere">Option 2 Link 1</a></li> 
       <li><a href="somewhere">Option 2 Link 2</a></li> 
       <li><a href="somewhere">Option 2 Link 3</a></li> 
       <li><a href="somewhere">Option 2 Link 4</a></li> 
       <li><a href="somewhere">Option 2 Link 5</a></li> 
      </ul> 
     </li> 
     <li><a href="somewhere">Option 3</a></li> 
     <li><a href="somewhere">Option 4</a></li> 
     <li><a href="somewhere">Option 5</a></li> 
     <li><a href="somewhere">Option 6</a></li> 
    </ul> 
</nav> 

虽然这种格式不会发生变化，与子菜单选项的数目可能（客户端可以随意改变这一点）。 我的jQuery至今：

$('#mainNav ul').hide(); 
$('#mainNav li a').click(function(){ 
    $('#mainNav li:has("ul")').each(
     function(){ 
      $('nav').animate({bottom:'60px'},300,'easeOutQuint',function(){ 
      //Do magic stuff here - i.e. display the correct sub-menu. 
      }); 
     } 
    ); 
}); 

目前，这一目标的所有选项（我无法捉摸为什么）点击时，我也还没有到如何只显示相应的子菜单底部。类可以添加到任何html元素，如果这有助于使事情更容易。

在此先感谢！

Answer 1

这个怎么样：

http://jsfiddle.net/qDX2q/3/

$('#mainNav ul').hide(); 
$('#mainNav a') 
    .click(function() 
      { 
       $('#mainNav ul').hide(); 
       $(this).siblings("ul").show(); 
       return false; 
      }); 
​ 

的东西，我觉得你失踪了：

• 确保您从单击事件返回false，这样坏的网址是不是紧随其后。
• this关键字。在上面的代码中，this实际上是您所在的锚标签。所以你可以只寻找兄弟ul s和显示他们