1

この jquery は 2 つのことを切り替えます。(1) css クラスと (2) div の表示。要素の外側 (Menu Toggle) をクリックすると、トグルはうまく機能しますが、要素自体の内側をクリックすると、div が切り替わりますが、css クラスは切り替わりません。何故ですか？

http://jsfiddle.net/aL7Xe/68/でのライブ プレビュー

「メニュー切り替え」を2回目にクリックしたときに、追加されたcssクラスが消える必要があります。

<div id="menuwrap">
 <a href="#" id="menutoggle">Menu Toggle</a>
 <ul id="menucontainer">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
 </ul>
</div>
this is more text

<script>
$('html').click(function() {
$('#menucontainer').hide();
$('#menutoggle').removeClass('menutoggle');
});

$('#menuwrap').click(function(event){
 event.stopPropagation();
});

$('#menutoggle').click(function(event){
 $('#menucontainer').toggle();
 $(this).addClass('menutoggle');
});
</script>
4

3 に答える 3

7 
$('#menutoggle').click(function(event){
    $('#menucontainer').toggle();
    $(this).toggleClass('menutoggle');
});

http://jsfiddle.net/L5Cq3/

目的の結果を達成するための最小限の行。

于 2012-06-12T23:53:44.617 に答える
1

$(this).addClass('menutoggle');に変更$(this).toggleClass('menutoggle');

于 2012-06-12T23:49:21.377 に答える
1

これは、Menu コンテナをクリックすると、両方のイベントが発生するためです (つまり、HTML クリック ハンドラと div クリック ハンドラ)。

おそらくこれがあなたが望むものです：

$('#menutoggle').click(function(event){
     $('#menucontainer').toggle();
      if ($(this).hasClass('menutoggle') 
           $(this).removeClass('menutoggle');
       else 
         $(this).addClass('menutoggle');
});

編集toggleClass（その存在を思い出させてくれたJuanへのクレジット）も 使用できます。内部的には、上記のコードと同じことを行っていると確信しています。

これがあなたの固定フィドルです：http://jsfiddle.net/aL7Xe/69/

于 2012-06-12T23:50:14.463 に答える