我正在構建一個菜單和子菜單的經典響應菜單，我很新的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

相關問題