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

小提琴