多級下拉導航 - 保持二級下拉菜單關閉

Question

所以我對編碼相對比較陌生，並且我試圖製作一個多級下拉菜單，打開時顯示第一級鏈接但不顯示第二級鏈接直到點擊。

我從一個codepen分支開始，並建立了導航，但我不知道要添加什麼腳本來關閉輔助鏈接。

// open mobile menu 
 
$('.js-toggle-menu').click(function(e){ 
 
    e.preventDefault(); 
 
    $('.mobile-header-nav').slideToggle(); 
 
    $(this).toggleClass('open'); 
 
}); 
 

 
$('.sub-toggle').click(function(e){ 
 
    e.preventDefault(); 
 
    $('.subnav1').slideToggle(); 
 
    $(this).toggleClass('open'); 
 
}); 
 

 
$('.sub-toggle2').click(function(e){ 
 
    e.preventDefault(); 
 
    $('.subnav2').slideToggle(); 
 
}); 
 

 
$('.sub-toggle3').click(function(e){ 
 
    e.preventDefault(); 
 
    $('.subnav3').slideToggle(); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
@media (min-width: 768px) { 
 
    .mobile-nav-wrap { 
 
    /* display: none; */ 
 
    } 
 
} 
 

 
.mobile-header-nav { 
 
    background-color: #222222; 
 
    display: none; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 100px; 
 
    width: 100%; 
 
} 
 
.mobile-header-nav li { 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
 
} 
 
.mobile-header-nav li a { 
 
    color: white; 
 
    display: block; 
 
    padding: 15px 15px; 
 
    text-align: left; 
 
    text-decoration: none; 
 
    -webkit-transition: all 0.3s ease-in-out; 
 
      transition: all 0.3s ease-in-out; 
 
} 
 
.mobile-header-nav li a:hover { 
 
    background-color: #2f2f2f; 
 
} 
 

 
a.mobile-menu-toggle { 
 
    padding-left: 50px; 
 
    color: #52575f; 
 
    text-decoration: none; 
 
    background: #eeeff0; 
 
    font-size: 3em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<header> 
 

 
    <nav class="mobile-nav-wrap" role="navigation"> 
 
    <ul class="mobile-header-nav"> 
 
     <li> 
 
     <a href="#" class="sub-toggle">Overview</a> 
 
     <ul class="subnav1"> 
 
     <li><a href="#">Nav Item 1</a></li> 
 
     <li><a href="#">Nav Item 2</a></li> 
 
     <li><a href="#">Nav Item 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a class="sub-toggle2" href="#">Resources</a> 
 
     <ul class="subnav2"> 
 
     <li><a href="#">Nav Item 1</a></li> 
 
     <li><a href="#">Nav Item 2</a></li> 
 
     <li><a href="#">Nav Item 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a class="sub-toggle3" href="#">Service</a> 
 
     <ul class="subnav3"> 
 
     <li><a href="#">Nav Item 1</a></li> 
 
     <li><a href="#">Nav Item 2</a></li> 
 
     <li><a href="#">Nav Item 3</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
    <a class="mobile-menu-toggle js-toggle-menu" href="#"> 
 
    Get Started 
 
    </a> 
 
    
 
</header>

，我工作的codepen可以在這裏找到： Codepen Link

任何意見是值得歡迎的

Answer 1

您可以試試這個。這些更改只能用於js邏輯。 另外，我不知道爲什麼你有e.preventDefault（）。如果您試圖避免提交表單，您只需要它。所以我把它們拿出來了。

<header> 

    <nav class="mobile-nav-wrap" role="navigation"> 
    <ul class="mobile-header-nav"> 
     <li> 
     <a href="#" class="sub-toggle">Overview</a> 
     <ul class="subnav"> 
     <li><a href="#">Nav Item 1</a></li> 
     <li><a href="#">Nav Item 2</a></li> 
     <li><a href="#">Nav Item 3</a></li> 
     </ul> 
     </li> 
     <li><a class="sub-toggle" href="#">Resources</a> 
     <ul class="subnav"> 
     <li><a href="#">Nav Item 1</a></li> 
     <li><a href="#">Nav Item 2</a></li> 
     <li><a href="#">Nav Item 3</a></li> 
     </ul> 
     </li> 
     <li><a class="sub-toggle" href="#">Service</a> 
     <ul class="subnav"> 
     <li><a href="#">Nav Item 1</a></li> 
     <li><a href="#">Nav Item 2</a></li> 
     <li><a href="#">Nav Item 3</a></li> 
     </ul> 
     </li> 
    </ul> 
    </nav> 

    <a class="mobile-menu-toggle js-toggle-menu" href="#"> 
    Get Started 
    </a> 

</header> 
<script> 
$().ready(function() 
{ 
$('.js-toggle-menu').click(function(e){ 
    $('.sub-toggle').slideToggle(); 
    $('.sub-toggle').each(function() 
    { 
     $(this).closest('li').find('.subnav').hide(); 
    }); 
}); 

$('.sub-toggle').click(function(){ 
    $(this).closest('li').find('.subnav').slideToggle(); 
}); 
}); 
</script> 

Answer 2

您可以只需添加一些CSS來隱藏子導航最初，像這樣：

.subnav1, .subnav2, .subnav3 { 
    display: none; 
} 

您可能還想更改類，使其更通用一些，如使用subnav和sub-toggle的類而不是subnav1,sub-toggle2等。然後，只需一個CSS規則和一個事件處理程序，無論如何你添加的許多菜單項。所以，你的隱藏子導航CSS也只是：

.subnav { 
    display: none; 
} 

而JavaScript來切換所有的菜單項被減少到只有：

$('.sub-toggle').click(function(e){ 
    $(this).next('.subnav').slideToggle(); 
    $(this).toggleClass('open'); 
}); 

我用一個例子here更新你的代碼筆。