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

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

仅显示主要类别。

$(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 时，整个类别向上滑动，知道为什么吗？

我试图实现这一点，只有当我点击主类别时，子类别才会向上滑动，否则，当我点击子 <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。