Bootstrap折叠菜单仅显示单个分类及本地打开Logo不显示问题求解

你使用的Bootstrap 5折叠组件原生支持互斥展开效果，只需做如下修改：

1. 给所有分类折叠面板外层新增一个统一父容器，设置唯一id，示例如下：

<!-- 新增父容器包裹所有分类折叠面板 -->
<div id="categoryWrapper">
  <div class="collapse" id="homeKitchen">
     <h1 class="mt-1 text-center h1">Home & Kitchen</h1>
  </div>
  <div class="collapse" id="hlthPrsnlCare">
    <h1 class="mt-1 text-center h1">Health & Personal Care</h1>
  </div>
  <!-- 剩余4个分类面板补充唯一id，比如processedFood、staples、beverage、dairy -->
  <div class="collapse" id="processedFood">
    <h1 class="mt-1 text-center h1">Processed Food</h1>
  </div>
  <div class="collapse" id="staples">
    <h1 class="mt-1 text-center h1">Staples & Grocery</h1>
  </div>
  <div class="collapse" id="beverage">
    <h1 class="mt-1 text-center h1">Beverage & Confectionary</h1>
  </div>
  <div class="collapse" id="dairy">
    <h1 class="mt-1 text-center h1">Dairy, Frozen & Bakery</h1>
  </div>
</div>

2. 给所有分类触发按钮添加data-bs-parent="#categoryWrapper"属性，同时补充剩余4个按钮的折叠触发属性，示例：

<div class="container-fluid border collapse collapsing" id="menuCollapse">
  <div class="row row-cols-3">
    <div class="col border p-0"> <button class="border-0 container-fluid  h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#homeKitchen" aria-expanded="false" aria-controls="homeKitchen" data-bs-parent="#categoryWrapper">Home & Kitchen</button> </div>
    <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#hlthPrsnlCare" aria-expanded="false" aria-controls="hlthPrsnlCare" data-bs-parent="#categoryWrapper">Health & Personal Care</button></div>
    <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#processedFood" aria-expanded="false" aria-controls="processedFood" data-bs-parent="#categoryWrapper">Processed Food</button></div>
    <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#staples" aria-expanded="false" aria-controls="staples" data-bs-parent="#categoryWrapper">Staples & Grocery</button></div>
    <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#beverage" aria-expanded="false" aria-controls="beverage" data-bs-parent="#categoryWrapper">Beverage & Confectionary</button></div>
    <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#dairy" aria-expanded="false" aria-controls="dairy" data-bs-parent="#categoryWrapper">Dairy, Frozen & Bakery</button></div>
  </div>
</div>

修改后点击不同分类按钮时，Bootstrap会自动关闭其他已展开的分类面板。

原因 #

你当前Logo的路径是绝对路径：<img src="/img/ingrow_logo_2.png" alt="ingrow-logo" class="ingrow-logo ms-4"/>，路径开头的/代表站点根目录：

• Live Server运行时，站点根目录是你的项目文件夹，能正确匹配到img文件夹下的Logo资源
• 直接双击本地HTML文件用file协议打开时，/会指向磁盘根目录，无法找到对应路径的图片

解决方案 #

将绝对路径改为相对路径，去掉开头的斜杠即可：

<img src="img/ingrow_logo_2.png" alt="ingrow-logo" class="ingrow-logo ms-4"/>

请确保你的项目文件结构满足：HTML文件和img文件夹在同一层级目录，img文件夹内存放了ingrow_logo_2.png文件。

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