jquery滑动菜单

Question

再次。我有一个我正在建立的菜单。一切工作正常，除了当我点击其中一个主要类别时，页面跳回顶端。我想阻止这一点，但我担心使用preventDefault（）会阻止正确加载其他链接。

这里是代码..

jQuery的

$(document).ready(function() { 
    // Collapse everything but the first menu: 
    $("#nav_menu > li > a").find("+ ul").slideUp(1); 
    // Expand or collapse: 
    $("#nav_menu > li > a").click(function() { 
     $(this).find("+ ul").slideToggle("fast"); 
    }); 
}); 

的标记

<ul id="nav_menu"> 
    <li><a href="#">Main Cat 1</a> 
     <ul> 
      <li><a href="whatever.php">Subcat 1</a></li> 
      <li><a href="whatever.php">Subcat 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Main Cat 2</a> 
     <ul> 
      <li><a href="whatever.php">Subcat 1</a></li> 
      <li><a href="whatever.php">Subcat 2</a></li> 
     </ul> 
    </li> 
</ul> 

任何帮助，将不胜感激！ :)

Answer 1

您需要调用preventDefault函数，以便您的a元素不会触发href。

$(document).ready(function() { 
    // Collapse everything but the first menu: 
    $("#nav_menu > li > a").find("+ ul").slideUp(1); 
    // Expand or collapse: 
    $("#nav_menu > li > a").click(function(e) { 
     e.preventDefault(); 
     $(this).find("+ ul").slideToggle("fast"); 
    }); 
});