1

選択に使用するトグル リストがあります。問題は、li 要素のクリック イベントが 2 回発生する場合があることです。.config div のトグルは正常に機能しますが、リストの親であるため、そこに何かがあるのではないかと思いました。ここで何が起こっているのか、誰にもわかりませんか？

HTML:

<div class="config">
    <div class="select-list hidden">
        <ul>
            <li>Something 1</li>
            <li>Something 2</li>
            <li>Something 3</li>
        </ul>
    </div>
</div>

jQuery:

$('body').on('click', '.config', function(e) {
    if (e.target == this) {
        $(this).find('.select-list').toggleClass('hidden');
    } else {
        e.stopPropagation();
    }
});

$('body').on('click', '.select-list li', function() {
    $(this).toggleClass('selected');
});
4

1 に答える 1

2

コードの 2 番目のチャンクを次のように変更します。

$('body').on('click', '.select-list li', function(e) {
    e.stopPropagation();
    $(this).toggleClass('selected');
});

リスト項目をクリックすると、クリック イベントが DOM を .config div にバブリングし、クリック イベントをトリガーして、toggleClass が再び発生します。

于 2013-10-04T16:08:57.337 に答える