绑定到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;
}

只留下显示的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本身的元素上.