3

クリックするとdivが新しいクラスを取得し（展開する）、そのdiv内のキャンセルリンクをクリックすると古いクラスに戻ります（閉じます）。

<div class="new-discussion small">
    <a class="cancel">Cancel</a>
</div>

<script>
    $('.new-discussion.small').click(function() {
        $(this).addClass("expand").removeClass("small");
    });
    $('a.cancel').click(function() {
        $('.new-discussion.expand').addClass("small").removeClass("expand");
    });
</script>

これで、展開クラスの追加は問題なく機能しますが、キャンセル リンクをクリックした後にパネルを閉じることは、次のコードを削除した場合にのみ機能します。

$('.new-discussion.small').click(function() {
    $(this).addClass("expand").removeClass("small");
});

だから私はこれが2番目の機能を妨げているに違いないと思いますが、その理由は本当にわかりません.

何か案は？ありがとう！

4

3 に答える 3

5

a要素は要素内にあるため.new-discussion、 をクリックすると、イベントがバブルアップしているため、親要素でもイベントがa発生します。click

これを修正するには、 を呼び出してイベントの伝播を停止しますe.stopPropagation();。これにより、親ハンドラーが実行されなくなります。

$('a.cancel').click(function(e) {
    e.stopPropagation();
    $('.new-discussion.expand').addClass("small").removeClass("expand");
});
于 2013-04-19T21:28:42.130 に答える