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

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 Link

欢迎任何建议

Answer 1

您可以只添加一些 CSS 来最初隐藏子导航，如下所示：

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

您可能还想更改 classes 以便它们更通用一些，例如只使用 subnav 和 sub-toggle 的 class 而不是 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>

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

Multi-level dropdown navigation - keep secondary dropdown closed

html

javascript

navigation

jquery

drop-down-menu