Question

我遇到以下情况：

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

FIDDLE

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

DEMO HERE

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

jquery只在切换li时切换，而不是在嵌套li上切换

3 个答案: