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

Question

所以我对编码比较陌生，我正在尝试制作一个多级下拉菜单，打开时会显示第一级的链接，但在点击之前不会显示第二级链接。

我从 codepen 的 fork 开始并构建了导航，但我不知道要添加什么脚本来关闭辅助链接。

// 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

最初你可以添加一些 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。

Answer 2

你可以试试这个。更改仅对 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>