Bootstrap導航下拉菜單切換問題

Question

我用引導導航創建了一個導航菜單。 當我按下移動切換菜單時，我添加了一個小的jQuery代碼，它將自動關閉並轉到目的地

但是如果我在導航中有下拉菜單。 此下拉菜單現在無法正常工作。 當我按下下拉菜單時，父項會自動展開，關閉菜單。 而且我無法檢查下拉菜單中可用的菜單，因此我嘗試添加條件。 但它不起作用。

在下拉菜單中，父類具有名為.dropdown-toggle的類。 如果此類可用，則不應自動關閉

if (jQuery(".navbar-collapse a").val() !== '.dropdown-toggle') {
    jQuery('.navbar-collapse a').click(function (e) {
        jQuery('.navbar-collapse').collapse('toggle');
    });
}

而這里的HTML代碼

<ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>

Answer 1

嘗試此操作，您的父菜單項將起作用，並且移動菜單切換

 <script>
 (function($) {
 jQuery(function($) {
 $('.navbar .dropdown').click(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideToggle();
  }, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
  });
  $('.navbar .dropdown > a').click(function() {   

    location.href = this.href;
  });
  });
  })(jQuery);
  </script>