在生成的切換元素上切換類

Question

我遇到的情況是我有點卡住，需要幫助。 讓我用一些代碼解釋一下自己。 我有以下HTML設置：

<button type="button" class="navbar-toggle collapsed"></button>
<div class="collapse navbar-collapse" tabindex="-1">
    <div class="nav navbar-nav" tabindex="-1">
         <div class="menuitem_wrapper" tabindex="-1">
              <a href="#" class="">Menu 1</a>
              <div class="dropdown-menu" tabindex="-1">
                  <a href="#">Sub 1.1</a>
                  <a href="#">Sub 1.2</a>
              </div>
         </div>
         <div class="menuitem_wrapper" tabindex="-1">
              <a href="#" class="">Menu 2</a>
              <div class="dropdown-menu" tabindex="-1">
                  <a href="#">Sub 2.1</a>
                  <a href="#">Sub 2.2</a>
              </div>
         </div>
     </div>
</div>

我已經使用jQuery構建了一些功能：

$(document).ready(function() {

    $(".collapsed").click(function() {
        $(".navbar-collapse").toggleClass('show-menu'); 
        $(".menuitem_wrapper").removeClass('menuitem_wrapper').addClass('menuitem_wrapper_mobile');
    });

    $(".menuitem_wrapper").click(function() {           
        $(this).find(".dropdown-menu").removeClass('dropdown-menu').addClass('dropdown-menu-mobile');       
    });

});

只要按下切換按鈕，功能就會觸發：超鏈接：顯示菜單1和菜單2（子項目通過CSS隱藏）。

我不完全理解的第一部分是為什么它起作用：

$(".menuitem_wrapper").click(function() {           
    $(this).find(".dropdown-menu").removeClass('dropdown-menu').addClass('dropdown-menu-mobile');       
});

為何不這樣：

$(".menuitem_wrapper_mobile").click(function() {            
    $(this).find(".dropdown-menu").removeClass('dropdown-menu').addClass('dropdown-menu-mobile');       
});

但是我遇到的主要問題是每當我按超鏈接時：顯示菜單1或菜單2。 但是我想創建具有切換效果的功能。

創建此代碼的困難之處在於，我無法將任何CSS類手動添加到div。 因為此菜單有兩種使用方式。 作為垂直顯示給用戶的移動菜單，以及作為默認菜單顯示並帶有懸停效果的水平菜單。

任何人都可以幫助我獲得所需的效果（切換）， 而不必在我的HTML代碼中添加類。

JSFIDDLE在這里

Answer 1

Java腳本

$(document).ready(function() {

    $(".collapsed").click(function() {
        $(".navbar-collapse").toggleClass('show-menu'); 
        $(".menuitem_wrapper").removeClass('menuitem_wrapper').addClass('menuitem_wrapper_mobile');
    });

    $(".menuitem_wrapper a:first-child").click(function() {         
        $(this).parent().children("div").toggleClass('dropdown-menu dropdown-menu-mobile');     
    });

});

小提琴

Answer 2

可以使用.toggle或.toggleClass（“ active”）代替.removeclass或.addclass

$( "" ).click(function() {
  $(this).toggle();
});

$("").click(function(){
  $(this).toggleClass("active");
});

您可以在切換功能或其他過渡中添加“慢速”，這樣它看起來像具有平滑的下拉菜單，而不是自動顯示下拉菜單。 您應該在li標簽而不是標簽中包裝Menu1和Menu 2。 菜單1和菜單2之所以沒有功能的原因是，因為您不在代碼中的任何位置，而使菜單和菜單2具有功能，因此您僅將其包裝在標簽上。