多级下拉导航 - 保持二级下拉菜单关闭

问题描述：

所以我对编码相对比较陌生，并且我试图制作一个多级下拉菜单，打开时显示第一级链接但不显示第二级链接直到点击。多级下拉导航 - 保持二级下拉菜单关闭

我从一个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

任何意见是值得欢迎的

答

您可以试试这个。这些更改只能用于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>

答

您可以只需添加一些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更新你的代码笔。

多级下拉导航 - 保持二级下拉菜单关闭

相关推荐