Javascript 多级下拉导航-关闭辅助下拉菜单

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

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

//打开移动菜单
$（'.js切换菜单'）。单击（函数（e）{
e、 预防默认值（）；
$（'.mobile header nav'）.slideToggle（）；
$（this.toggleClass（'open'）；
});
$（'.sub-toggle'）。单击（函数（e）{
e、 预防默认值（）；
$（'.subnav1'）.slideToggle（）；
$（this.toggleClass（'open'）；
});
$（'.sub-toggle2'）。单击（函数（e）{
e、 预防默认值（）；
$（'.subnav2'）.slideToggle（）；
});
$（'.sub-toggle3'）。单击（函数（e）{
e、 预防默认值（）；
$（'.subnav3'）.slideToggle（）；
});
*{
框大小：边框框；
}
@介质（最小宽度：768px）{
.移动导航包裹{
/*显示：无*/
}
}
.移动报头导航{
背景色：#22222；
显示：无；
列表样式：无；
保证金：0；
填充：0；
位置：绝对位置；
顶部：100px；
宽度：100%；
}
.移动报头导航李{
边框底部：1px实心rgba（255、255、255、0.1）；
}
.移动报头导航李a{
颜色：白色；
显示：块；
填充：15px 15px；
文本对齐：左对齐；
文字装饰：无；
-webkit过渡：所有0.3轻松输入输出；
过渡：所有0.3秒的缓进缓出；
}
.移动标题导航李a：悬停{
背景色：#2f；
}
a、 移动菜单切换{
左侧填充：50px；
颜色：#52575f；
文字装饰：无；
背景：#eeeff0；
字号：3em；
}
























您可以添加一些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');
});

我用一个例子更新了你的代码笔。
你可以试试这个。这些更改仅对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>

























$（）.ready（函数（））
{
$（'.js切换菜单'）。单击（函数（e）{
$（'.sub-toggle'）.slideToggle（）；
$（'.sub-toggle'）。每个（函数（）
{
$（this）.closest（'li'）.find（'.subnav'）.hide（）；
});
});
$（'.sub-toggle'）。单击（函数（）{
$（this）.closest（'li'）.find（'subnav'）.slideToggle（）；
});
});