停止传播不工作-ul>；李>；ul>；li-jQuery

我试图创建一个双开闭侧边栏。侧边栏中的每个li都可以有一个列表，列表本身也可以有一个列表。例如：

<div class="list-panel">
    <ul>
        <li class="category">
            <a href="/inphos/">
                <i class="glyphicon glyphicon-home"></i>
                <span class="nav-label">Dashboard</span>
            </a>
        </li>
        <li class="category">
            <a href="#">
                <i class="glyphicon glyphicon-pencil"></i>
                <span class="nav-label">Administratie</span>
            </a>
            <ul>
                <li class="group">
                    <a href="#">Abonnementen</a>
                    <ul>
                        <li>
                            <a href="#">Abo-Orders</a>
                        </li>
                        <li>
                            <a href="#">VoIPGrid</a>
                        </li>
                        <li>
                            <a href="#">RoutIT</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

出于某种原因，这段jQuerycode无法正常工作，您知道原因吗

jshiddle here:

分解以下内容：-

$('.group').on('click', function(){
    console.log('group');
}).on('click','ul>li',function(e){
    e.stopPropagation();
}).on('click','category',function(e){
    e.stopPropagation();
});

你可以在这里看到：-

$('.group').on('click','category',function(e){
    e.stopPropagation();
});

这是在查找

组中的
类别
元素，而不是类。这是它找不到的。将
类别
更改为
。类别
仍将不起作用，因为
类别
是
组
的父级

试试这个：-


$（文档）.ready（函数（）{
$（'.category.group'）。在（'click'，function（）上{
console.log（'category'）；
if（$（this）.hasClass（'active'））{
$（this.children（'ul'）.slideUp（200）；
$（this.removeClass（'active'）；
}否则{
$（this.children（'ul'）。向下滑动（200）；
$（this.addClass（'active'）；
}
返回false；
});
});
li{
列表样式类型：无；
}
李阿{
文字装饰：无；
颜色：黑色；
字体家族：时代；
边框底部：1px实心#999；
}



















您从未为
.group
元素添加e.stopPropagation（），您只有
控制台.log（）
。记住将
e
作为参数添加到事件函数中

此外，您还需要在开始时将“active”类添加到列表中。现在，只需单击两下即可获得任何明显的更改。
感谢您的反应，我在尝试给出示例代码时意外删除了很多：）感谢您的解释，现在我了解了更多它的工作原理！
$('.group').on('click','category',function(e){
    e.stopPropagation();
});