javascript - jQueryの伝播と複数のクラス

Question

- アップデート -

私は少し愚かで、子ULが親リストをカバーしていたので（不透明度フェードアウト）、グループを1回クリックした後、グループをクリックできませんでした。おっと！とにかくみんなを助けてくれてありがとう！

jQueryの伝播に関する問題は、誰もが取り組んでいる問題です。しかし、これは私が修正する場所を見つけることができない私のケースです（または、適切な場所を見ていないか、jQueryスキルが理解するのに十分ではないかもしれません）。

基本的なケースは、私にはいくつかのグループがあり、グループにはいくつかのオプションがあります。グループの1つをクリックすると、オプションがポップアップ表示されます。しかし、オプションの1つをクリックすると、ポップアップアクティビティ全体が再び発生します。これは、親の子であるため、子が捕らえられているクラスを認識しているためです。

私のHTMLは次のようになります。

<div id="buttons">
        <ul>
            <li class="group">Group 1
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 2
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 3
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
            <li class="group">Group 4
                <ul>
                    <li class="link">Link</li>
                </ul>
            </li>
        </ul>
</div>

それは非常に単純に見え、私が思うに何も問題はないと思います。これは、リスト内にネストされたリストにすぎません。

しかし、私のjQueryコード。次のようになります。

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);

    /*
    $(".link").click(function(event) {
        event.stopPropagation();
    });
    */

});

それが実際に行うことは次のとおりです。

グループの子をデフォルトの一番上の位置にリセットする
クリックされたグループを取得する
ターゲットグループの子ULの合計の高さを取得する
アニメーションの距離を準備する
アニメーションを起動する

それに伴って問題はなく、すべてが希望どおりに機能しますが、lis内のsをクリックするulと、アニメーションが起動し続けるだけであり、それは計画の一部ではありません。

お気づきかもしれませんが、2ブロックのコードをコメントアウトしました。それは、答えの相対的な問題のためにインターネットをつまずいたときに私が見つけた伝播を制御するための2つの異なる方法です。ただし、どちらも良い結果は得られません。何が起こるかというと、伝播は実際には停止しますが、別のグループをクリックすることもできなくなります。

それが一言で言えば問題です。追加する行が1つか2つあればいいと思いますが、何が収まるかわからず、頭に浮かんだことはほとんどすべて試しました。

また、答えが見つからないが、コードマークアップなどについてフィードバックがある場合は、それも歓迎します（私はインタラクションデザイン/ Web開発の学生なので、それもありがたいです:)）

score 0 · Accepted Answer

clickリスナーの別の方法を提案します。onjQueryでメソッドを使用する場合、リスナーを子要素に委任できます。そのようです：

$('#buttons').on('click', 'li', function(e){
    var li = $(this);

    if(li.hasClass('group')){
        alert('group was clicked');
    }
    else if(li.hasClass('link')){
        alert('link was clicked');
        e.stopPropagation();
    }
});

このコードの実際の例はここにあります-http://jsfiddle.net/skip405/YWzxB/

注意：委任のstopPropagation一部を削除すると、 2つのアラートが表示されます。最初に-の場合、次に-の場合。linklinkgroup

score 0 · Accepted Answer

クリックハンドラーを.groupアイテムにインストールするのではなく、トグル要素にのみインストールする必要があります。

<li class="group">
    <a class="toggle">Group 2</a>
    <ul>
        <!-- contents to show & hide -->
    </ul>
</li>

$(".toggle").click(function(e) {
    $(this).next()... // to reference the ul
})

score 0 · Accepted Answer

次のコードを.groupクリックハンドラーの外に移動するだけです。

$(".link").click(function(event) {
    event.stopPropagation();
});

完全なコード：

$(".group").click(function(event) {

    // if ($(event.target).is('ul li ul li')) return false;

    $(".group").children("ul").animate({top: 0, opacity: 0}, 200);
    var liHeight = ($(this).children("ul").children("li").height())+20;
    var totalOptions = $(this).children("ul").children("li").length;
    var combinedHeight = totalOptions * liHeight;
    var slideIn = -(16+combinedHeight) // formula doing math on slidedistance
    $(this).children("ul").animate({
                            top: slideIn,
                            opacity: 1
                        }, 600);
});


$(".link").click(function(event) {
   event.stopPropagation();
});

javascript - jQueryの伝播と複数のクラス

3 に答える 3

Related

Reference