jQuery单击功能未触发

Question

我遇到的问题是我已构建了此响应式导航。 我只希望单击汉堡包图标时将其下拉，但是如果我尝试定位它，它将无法正常工作。 仅当我定位嵌套的整个导航栏时，它才有效。

这是一个本地的jsfiddle的链接在这里

HTML代码

<div class="toggleMenu">
  <button type="button" class="navbar-toggle" id="toggle-btn"></button>
</div>

<nav class="level-nav hidden-md">
  <ul>
    <li><a href="#">About Me</a></li>
    <li><a href="#">Pulses</a></li>
    <li><a href="#">Kudos</a></li>
    <li><a href="#">Blogs</a></li>
    <li>
      <a href="#">Resources <b class="caret"></b></a>
      <div class="level-inner">
        <span class="split"></span>
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

jQuery代码

$(document).ready(function(){
  var mobileMenu = $(".level-nav li a");
  $(mobileMenu).each(function() {
    if ($(this).next().length > 0) {
        $(this).addClass("parent");
    };
  })

  /* Defined variables for main and sub multi-level navigations */
  var subNav = $("#toggle-btn");

  /* Function that activates the sub-navigation bar to toggle the sibiling which is the  .level-nav */
  $(subNav).click(function (e){
    e.preventDefault();
    $(this).siblings(".level-nav").toggle(175, "easeInQuad");
  });
});

Answer 1

该按钮不是导航的兄弟，而是包裹在DIV中，而DIV是导航的兄弟

$(this).closest('.toggleMenu').siblings(".level-nav").toggle(175, "easeInQuad");

并使用类似的toggle() ，还必须包括jQuery UI

小提琴