Bootstrap4 Collapse如何实现点击一个折叠项时关闭其他所有展开项

你遇到的报错和功能不生效的核心原因是外层容器的id属性书写错误：
你当前外层div的id写为了 id="#viewCustomFilters"，id值中多了不需要的#前缀。#是CSS选择器中用于标识id类型选择器的符号，不属于id本身的内容，因此Bootstrap通过data-parent="#viewCustomFilters"查找对应父容器时无法匹配到元素，才会抛出Cannot read property 'querySelectorAll' of null的空值错误。

修复方案 #

只需要做两处调整即可实现需求：

1. 修改外层容器的id属性，去掉多余的#：

<!-- 修改前 -->
<div id="#viewCustomFilters" class="view-custom-filters">
<!-- 修改后 -->
<div id="viewCustomFilters" class="view-custom-filters">

2. 保留所有折叠内容元素上的data-parent="#viewCustomFilters"属性即可。

调整后Bootstrap Collapse组件会自动实现同父容器下折叠项的互斥逻辑：点击新的折叠按钮时，会自动折叠已经展开的其他折叠区域，再展开当前选中的区域，完全符合你的预期。

修正后完整代码 #

.view-custom-filters {
  display: flex;
}

.view-collapse-button {
  background: lightgrey;
  width: 150px;
  height: 50px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

<div id="viewCustomFilters" class="view-custom-filters">
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#categories-collapsed" aria-expanded="true" aria-controls="categories-collapsed">
      Categories
    </div>
    <div class="view-collapse-content collapse" id="categories-collapsed" data-parent="#viewCustomFilters">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
        <li>
          <a href="#">Link 3</a>
        </li>
        <li>
          <a href="#">Link 4</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="view-collapse-wrap">
    <div class="view-collapse-button" role="button" data-toggle="collapse" data-target="#brands-collapsed" aria-expanded="true" aria-controls="brands-collapsed">
      Brands
    </div>
    <div class="view-collapse-content collapse" id="brands-collapsed" data-parent="#viewCustomFilters">
      <ul>
        <li>
          <strong>All</strong>
        </li>
        <li>
          <a href="#">Link 5</a>
        </li>
        <li>
          <a href="#">Link 6</a>
        </li>
        <li>
          <a href="#">Link 7</a>
        </li>
        <li>
          <a href="#">Link 8</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

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