0

単純なjQueryアコーディオンスクリプトに問題があります。私はこのページでいくつかのイベントをリストするためにそれを使用しています：http ：//www.melisayavas.com/kush-project/

私が抱えている問題は、ユーザーがラッパー内のどこかをクリックするとスクリプトが折りたたまれるということです。ユーザーがイベントのタイトルをクリックしたときにのみスクリプトを折りたたむ必要があります。

同じ問題があるこのjsfiddleを見ることができます：http：//jsfiddle.net/mcDeE/

私が使用しているスクリプトの完全なコードはここにあります：http：//pastebin.com/hJEufLQU

これはHTMLです：

<div id="va-accordion" class="va-container" style="">
    <div class="va-wrapper">
        <div class="va-slice" style="opacity: 1;">
            <div class="va-title" style="">
                <h2>Relationship, 26 February 2013</h2>
            </div>
            <div class="va-content" style="display: block;">
                <div class="event-left"></div>
                <div class="event-right"></div>
            </div>
        </div>
        <div class="va-slice" style="opacity: 0.2;">
        <div class="va-slice" style="opacity: 0.2;">
    </div>
</div>
4

1 に答える 1

1

私が抱えている問題は、ユーザーがラッパー内のどこかをクリックするとスクリプトが折りたたまれるということです。ユーザーがイベントのタイトルをクリックしたときにのみスクリプトを折りたたむ必要があります。

目的の結果を得るには、イベントがアコーディオンルート要素に到達する前にイベントの伝播をブロックする必要があります。これを行う必要があるのは、.va-content要素でクリックが発生した場合のみです。

$(function() {
    $('#va-accordion').vaccordion();
    $(".va-content").click(function(e) {
        e.stopPropagation();                    
    });
});

なぜこれが機能するのですか？

イベントは、ルート要素からターゲット要素まで伝播し（キャプチャフェーズ）、ターゲットに到達した後、ルート要素に戻って上昇します（バブリングフェーズ）。ターゲット要素は、イベントを受信した要素です。

キャプチャフェーズとバブリングフェーズの両方でイベントリスナーを登録することができます。ここでは、バブリングフェーズでイベントを登録するjQueryを使用しています。

stopPropagationDOMを介したイベントの伝播をブロックすることを許可します。

これは、 W3Cイベントモデルに関する詳細情報が必要な場合に備えて、私が書いた記事です。

于 2012-12-01T18:12:05.343 に答える