Question

因此我对编码相对较新，我正在尝试创建一个多级下拉菜单，打开时会显示第一级链接，但在点击之前不会显示第二级链接。

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

＆＃13;

// 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();
});

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

我正在处理的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（）。如果您试图避免提交表单，则只需要它。所以我把它们拿出来了。

dt = ws.getTable(aListOfStringParamters)

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

2 个答案: