jquery - jqueryは、ネストされたliではなく、liをクリックしたときにのみトグルします

Question

次の状況になりました。

http://jsfiddle.net/7XrUM/

トグル用のこのjsを使用：

$("ul > li.closed").click(function() {
    var li = $(this).closest('li');
    li.find(' > ul').slideToggle('fast');
    $(this).toggleClass("closed open");
});

「見出し」をクリックすると、ulが表示されます。しかし、画像またはそれらの間をクリックすると、それらは元に戻り、再び非表示になります。したがって、ネストされた要素の一部をクリックするときではなく、「見出し」をクリックするときに切り替えたいだけですが、これを機能させることはできません。

Answer 1

それが実際にLIクリックされたイベントであり、バブルしただけのイベントではないかどうかを確認してください。

$("ul > li.closed").click(function(e) {
    if (e.target === this) {
        var li = $(this).closest('li');
        li.find(' > ul').slideToggle('fast');
        $(this).toggleClass("closed open");
    }
});

フィドル

Answer 2

これを試して：

$(function () {
    $("li.closed > ul").hide();

    $("ul > li.closed").click(function () {
        var li = $(this).closest('li');
        li.find(' > ul').slideToggle('fast');
        $(this).toggleClass("closed open");
    });

    $("li.fl, li.fl > a").click(function (e) {
        e.stopPropagation();
    });
});

デモはこちら