1

我得到以下结构： - 嵌套 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 时，整个类别向上滑动，知道为什么吗？

我试图实现这一点，只有当我点击主类别时，子类别才会向上滑动，否则，当我点击子项目时，什么也不会发生<li>。

4

2 回答 2

5

这是解决您的问题的方法：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 本身上。

于 2013-08-06T19:42:34.957 回答
4

一个简单的解决方法是通过添加以下内容来停止事件冒泡：

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

jsFiddle 示例

.stoppropagation()防止事件冒泡 DOM 树。因此，上面的块所做的是寻找任何作为其他列表项的子项的列表项，并且每当它注册一个点击时，它会阻止点击事件冒泡 DOM。

于 2013-08-06T19:42:55.040 回答