如何实现点击容器任意处展开面板，点击复选框不关闭？

云原生阿岚

2026-7-25

解决点击复选框时筛选面板关闭的问题

你不需要移除父容器的data-toggle="collapse"属性——移除的话会导致点击容器无法打开面板。问题出在事件冒泡：点击复选框或其标签时，事件会向上传递到父容器，触发collapse的切换逻辑（关闭面板）。

解决方法是阻止复选框和标签的事件向上冒泡，具体实现如下：

方法1：使用jQuery（适配你的Bootstrap环境）

在页面的<script>标签中添加以下代码：

$(document).ready(function() {
  // 监听复选框和标签的点击事件，阻止事件冒泡
  $('#filter1 input[type="checkbox"], #filter1 label').on('click', function(e) {
    e.stopPropagation();
  });
});

方法2：使用原生JavaScript

如果不想依赖jQuery，也可以用原生JS实现：

document.addEventListener('DOMContentLoaded', function() {
  const filterOptions = document.querySelectorAll('#filter1 input[type="checkbox"], #filter1 label');
  
  filterOptions.forEach(element => {
    element.addEventListener('click', function(e) {
      e.stopPropagation();
    });
  });
});