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");
});

当点击"Headline“时，将显示用户界面。但当我点击一张图片或在它们之间点击时，它们会切换回来，再次隐藏起来。所以我只想在点击"Headline“的时候切换，而不是点击一些嵌套元素的时候，但是我不能让这个元素工作。

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();
    });
});

Answer 3

最好的做法是将action元素封装在HTML标记中，以获得更多的控制：

<ul>
    <li class="closed"><a href="javascript:void(0)">Headline 1</a>
        <ul>
            <li class="fl"><a href="#"><img src="#"></a></li>
            <li class="fl"><a href="#"><img src="#"></a></li>
        </ul>
    </li>

    ...       
</ul>

这样，如果您在UL内单击任何会关闭显示区域的内容，您就不需要担心了。

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