生成されたトグル要素のクラスを切り替えます

Question

私はちょっと立ち往生し、助けが必要な状況があります。いくつかのコードで自分自身を説明させてください。私はjQueryを使っていくつかの機能で構築する必要があり

<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> 

：私は、次のHTMLを設定している（メニュー1とメニュー2に示されています。トグルボタンにハイパーリンクが押されたときに機能がトリガー

$(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');  
    }); 

}); 

サブアイテムは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。しかし、私はトグル効果を持つ機能を作りたいと思っています。

このコードを作成する際に難しいのは、divに手動でCSSクラスを追加できないことです。このメニューは2つの方法で使用されるためです。ユーザに垂直に提示されるモバイルメニュー、およびホバー効果で水平に提示されるデフォルトメニューとして。

は、私のHTMLコードにクラスを追加することなく、をトグルして、希望する効果を得ることができます。

JSFIDDLE OVER HERE

Answer 1

Javascriptを

$(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');  
    }); 

}); 

Fiddle

Answer 2

代わり.removeclassの

か、

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

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

を.toggleか.toggleClass（ "アクティブ"）を使用することができます.addclass

トグル機能やその他のトランジションに「ゆっくり」を追加すると、ドロップダウンメニューを自動的に表示するのではなく、スムーズなドロップダウンのように見えるようになります。 Menu1とMenu2は、タグではなくliタグで囲む必要があります。メニュー1とメニュー2には機能がありません。なぜなら、メニューとメニュー2に機能を与えているコードのどこにもいないからです。タグにのみラップしているからです。