侧边栏筛选列表展开收起异常：点击列表触发关闭问题求助

这个问题本质是事件冒泡导致的——你把点击事件绑定在了.parent整个容器上，所以不管点击.parent里的哪个子元素（包括列表项<li>），事件都会向上冒泡到.parent，触发slideToggle，导致列表被意外收起。下面给你两种实用的解决方案：

方案一：仅让触发按钮（+号）响应点击 #

最直接的优化是把点击事件绑定到用来控制展开/收起的<span>按钮上，而不是整个.parent容器。这样只有点击+号时才会切换列表状态，点击列表项不会触发任何操作，逻辑更清晰。

修改后的JavaScript代码：

// 绑定点击事件到.parent下的span触发按钮
jQuery('.parent > span').click(function() {
    // 找到当前span的兄弟元素.children，执行展开/收起动画
    jQuery(this).siblings('.children').slideToggle(200);
});

你的HTML结构不需要做任何改动，保持原样即可。

方案二：阻止列表项的事件冒泡 #

如果你希望.parent的其他区域（除了列表项）也能触发展开/收起，可以保留对.parent的事件绑定，但在列表项上阻止事件向上冒泡，这样点击<li>时事件不会传递到.parent，也就不会触发收起操作。

代码示例：

// 保留原有的.parent点击事件
jQuery('.parent').click(function() {
    jQuery(this).children('.children').slideToggle(200);
});

// 给列表项添加事件，阻止事件冒泡到父元素
jQuery('.parent .children li').click(function(e) {
    e.stopPropagation(); // 中断事件向上传递的路径
});

两种方案都能解决你的问题，优先推荐第一种，因为它从根源上避免了不必要的事件冒泡，代码逻辑更简洁。

内容的提问来源于stack exchange，提问作者Galili Omri