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