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

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

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

欢迎任何建议

最佳答案

您可以尝试一下。更改仅对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>