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

在这里演示

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