javascript - JQuery点击功能没有触发

Question

我遇到的问题是我构建了这个响应式导航。我只希望它在单击汉堡包图标时下拉，但如果我尝试定位它，它将不起作用。它仅在我定位它嵌套的整个导航栏时才有效。

这是本地 jsFiddle 的链接 here

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中

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

要像这样使用 toggle()，您还必须包含 jQuery UI

FIDDLE