我正在构建一个菜单和子菜单的经典响应菜单，我很新的jquery，所以我很难找出如何隐藏以前的子菜单当另一个需要显示。jquery：在点击显示子菜单，并隐藏任何其他打开的

这是HTML：

<nav class="products"> 
    <ul> 
     <li class="brown link-menu"><a href="#">wine essentials</a> 
      <div class="sub-menu"> 
       <div class="content-sub-menu"> 
        <ul class="sub-menu-list"> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">standard</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">premium</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">super premium</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">ultra premium</a></li> 
        </ul> 
       </div> 
      </div> 
     </li> 
     <li class="pink link-menu"><a href="#">wine selective & prestige</a> 
      <div class="sub-menu"> 
       <div class="content-sub-menu"> 
        <ul class="sub-menu-list"> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">standard</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">premium</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">super premium</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">ultra premium</a></li> 
        </ul> 
       </div> 
      </div> 
     </li> 
     <li class="green link-menu"><a href="#">master distillers</a> 
      <div class="sub-menu"> 
       <div class="content-sub-menu"> 
        <ul class="sub-menu-list"> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">standard</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">premium</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">super premium</a></li> 
         <li class="link-subcat"><a href="#" class="menu-subcat-link">ultra premium</a></li> 
        </ul> 
       </div> 
      </div> 
     </li> 
    </ul> 
</nav>

这是SCSS：

nav.products { 
    ul { 
    li.brown { 
     border-left: 10px solid #a09484; 
    } 
    li.pink { 
     border-left: 10px solid #9d7b8c; 
    } 
    li.green { 
     border-left: 10px solid #558d80; 
    } 
    li { 
     border-bottom: none; 
     padding: 1em 0; 
     margin-bottom: .2em; 
     a {} .sub-menu { 
     height: 0; 
     overflow: hidden; 
     .content-sub-menu { 
      -moz-transform: translateY(-100%); 
      -ms-transform: translateY(-100%); 
      -webkit-transform: translateY(-100%); 
      transform: translateY(-100%); 
      -webkit-transition: transform 0.3s ease-in-out; 
      -o-transition: transform 0.3s ease-in-out; 
      transition: transform 0.3s ease-in-out; 
      ul.sub-menu-list { 
      padding-left: 1em; 
      li { 
       font-size: 1em; 
       margin-bottom: 0; 
       a {} 
      } 
      } 
     } 
     } 
     &.current { 
     .content-sub-menu { 
      -moz-transform: translateY(0%); 
      -ms-transform: translateY(0%); 
      -webkit-transform: translateY(0%); 
      transform: translateY(0%); 
     } 
     /*DROPDOWNS*/ 
     .sub-menu { 
      height: 100%; 
     } 
     /*DROPDOWNS END*/ 
     } 
    } 
    } 
} 
nav.products ul li.current .sub-menu { 
    height: 100%; 
}

而且我使用这个脚本来显示子菜单：

$('.products ul li').click(function(e) { 
    $(this).toggleClass('current'); 
});

来源

2016-09-06 Lowtrux

尝试用'$（ '产品UL礼 '）。点击（函数（E）{ $（'。产品UL li.current'）。toggleClass（ 'current'）; $（this）.toggleClass（'current'）; }）;' – guradio

为了隐藏以前打开的子菜单，您需要删除他们的“当前”类。

$('.products ul li').click(function(e) { 
    $('.products ul li').not($(this)).removeClass('current'); 

    $(this).toggleClass('current'); 
});

来源

2016-09-06 08:27:05

这工作，你保存了一天@Naim非常感谢！ – Lowtrux

$('.products ul li').click(function(e) { 
    $('.current').removeClass('.current'); 
    $(this).addClass('current'); 
});

尝试以上。这样它会在页面中找到任何当前的类。删除它并将该类添加到当前元素。

来源

2016-09-06 08:26:50 FedeSc

这很容易，只需先从所有菜单项中删除'当前'类，然后进行切换。

$('.products ul li').click(function(e) { 
    $('.products ul li').removeClass('current'); 
    $(this).toggleClass('current'); 
});

这里是一个工作示例：http://codepen.io/anon/pen/NRPLRN

来源

2016-09-06 08:27:05

刚刚从li删除.current类，toggling的class之前。

$('.products ul li').click(function(e) { 
    $('.products ul li.current').removeClass('current'); 
    $(this).toggleClass('current'); 
});

Updated PEN

来源

2016-09-06 08:28:59

为什么要使用** toggleClass **而不是** addClass **？在这种情况下，我认为** addClass **更好，因为比** toggleClass **更快。 – Vixed

jquery：在点击显示子菜单，并隐藏任何其他打开的

回答

Updated PEN

相关问题