jquery - 菜单上的 jQuery 数组

Question

我正在使用与此类似的 HTML 结构

<ul class="top-level">
   <li><a href="#"></a>
       <ul class="dropdown">
          <li><a href="#"></a>
          </li>
       <ul>
   <li>
</ul>

像这样使用 jQuery

$(".top-level").on("click", "a", function() {
  $(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

除了单击一个链接以拉下一个下拉菜单后，当我单击另一个顶级链接以拉下另一个下拉菜单时，第一个下拉菜单不会消失。有没有办法选择 .dropdown 中的所有其他元素，除了我想要的元素并要求它们隐藏自己？

提前致谢

Answer 1

$(".top-level").on("click", "a", function() {
  var theDrop = $(this).next("ul.dropdown"); //convert dropdown in question to var
  theDropState = theDrop.is(':visible'); //record current state of dropdown
  $("ul.dropdown").hide(); //hide all dropdowns
  if(!theDropState){ theDrop.show(); } //if state was invisible, show dropdown
});

此方法是无状态的，并且每次都会设置正确的条件。使用切换可能会$('ul.dropdown').toggle();导致所有下拉菜单同时显示。

Answer 2

像这样使用它

$(".top-level").on("click", "a", function(e) {
  e.preventDefault();
  $('ul.dropdown').hide(); 
  $(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

如果您单击已打开的下拉菜单，它将首先隐藏然后再次出现。避免像这样修改它

$(".top-level").on("click", "a", function(e) {
    e.preventDefault();
    if($(this).next("ul.dropdown").is('visible'))
      return;
    // as the target drop down is already visible do nothing and return      
    $('ul.dropdown').hide(); 
    $(this).next("ul.dropdown").toggle(); 
         // Show / hide the corresponding sub-menu
});

Answer 3

您可以先隐藏任何可见的下拉列表。然后你继续并显示你当前正在点击。

$(".top-level").on("click", "a", function() {
     $('ul.dropdown').fadeOut(100); //hide any visible drop down first
     $(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

希望这就是你想要的。