Question

我得到以下结构： - 嵌套UL

<ul class="depth-one">
    <li>Category 1
        <ul class="depth-two">
            <li > Category 1.1</li>
            <li> Category 1.2</li>
            <li> Category 1.3</li>
        </ul>
    </li>
    <li> Category 2
        <ul class="depth-two">
            <li>Category 2.1</li>
            <li>Category 2.2</li>
            <li>Category 2.3</li>
        </ul>
    </li>
    <li>Category 3
        <ul class="depth-two">
            <li>Category 3.1</li>
            <li>Category 3.2</li>
            <li>Category 3.3</li>
        </ul>
    </li>
</ul>

我已经使用CSS应用规则：

ul{
    list-style: none;
    padding:0;
    margin:0;
}
.depth-one{
    display:block;
}
.depth-two{
    display:none;
}

仅显示MAIN类别。

$(document).ready(function() {
    $(".depth-one > li").click(function() {
        selector = $(this).find(' > .depth-two');
        if($(selector).css("display") == "none"){
            selector.slideDown(800);
        } else {
            selector.slideUp(800);
        }
    });
});

这个，在点击MAIN类别时切换SUB类别。

这是一个小提琴演示：http://jsfiddle.net/NB4bN/1/

现在，正如您所看到的，当我点击SUBCATEGORY时，整个类别都会向上滑动，任何想法为什么？

我正在努力实现这一点，只有当我点击MAIN类别时，子类别才会向上滑动，否则，当我点击子<li>项时没有任何反应。

Answer 1

以下是您的问题的解决方法：http://jsfiddle.net/smerny/NB4bN/2/

$(document).ready(function () {
    $(".depth-one > li").click(function (e) {
        if (e.currentTarget == e.target) {
            selector = $(this).find(' > .depth-two');
            if ($(selector).css("display") == "none") {
                selector.slideDown(800);
            } else {
                selector.slideUp(800);
            }
        }
    });
});

我添加了检查，以查看currentTarget和target是否相同。因此，您知道点击是否在您的li或li本身的元素上。

Answer 2

一个简单的解决方法是通过添加：

来停止事件冒泡

$('li li').click(function (e) {
    e.stopPropagation();
});

<强> jsFiddle example

.stoppropagation()可防止事件冒泡DOM树。所以上面的块所做的就是寻找任何列表项，这些列表项是其他列表项的子项，每当它在一个列表项上注册一个点击时，它就会阻止点击事件冒泡DOM。

绑定到LI的事件也由子元素的点击触发

2 个答案: