Bootstrap 4中data-parent实现Div切换折叠功能异常求助

我来帮你搞定这个问题，其实有两种靠谱的方式实现你要的「点击一个链接展开对应内容，同时自动关闭其他已展开面板」的效果：

方法一：用Bootstrap原生手风琴功能（推荐，无需额外JS） #

Bootstrap 4本身就内置了手风琴的联动逻辑，只要你的HTML结构符合要求就行，不用额外写jQuery：

1. 确保所有折叠面板的父容器（也就是你的#display_data）有明确的ID
2. 每个.collapse面板都加上data-parent="#display_data"属性——这个属性是关键，它会告诉Bootstrap：当前面板属于这个父容器的手风琴组，展开时自动关闭同组的其他面板
3. 你导航链接上的data-toggle="collapse"和data-target设置是对的，不用改

调整后的完整代码（只做了必要的小改动）：

<html lang="en">
<head>
  <title>Hello, World</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark sticky-top">
  <a class="navbar-brand" data-toggle="collapse" data-target="#home" data-parent="#display_data"><img src="home.png" alt="Logo" style="width:40px;"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" data-target="#chapter1" data-parent="#display_data">Chapter 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" data-target="#chapter2" data-parent="#display_data">Chapter 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="collapse" data-target="#chapter3" data-parent="#display_data">Chapter 3</a>
      </li>
    </ul>
  </div>
</nav>
<br/>
<div id="display_data">
  <div id="home" class="collapse show" data-parent="#display_data">
    Ideally, each toggle closes any shown sections so there is only one "chapter" open at a time
  </div>
  <div id="chapter1" class="collapse" data-parent="#display_data">
    This is Chapter 1
  </div>
  <div id="chapter2" class="collapse" data-parent="#display_data">
    This is Chapter 2
  </div>
  <div id="chapter3" class="collapse" data-parent="#display_data">
    This is Chapter 3
  </div>
</div>
</body>
</html>

我移除了多余的.toggle类（Bootstrap不需要这个），确保每个折叠面板都加上了data-parent="#display_data"，这样原生联动逻辑就会生效了。

方法二：修复你的jQuery代码（如果不想改HTML结构） #

如果不想调整HTML，那你之前的代码没生效的原因是脚本执行时机不对——要么DOM还没加载完，要么Bootstrap的collapse组件还没初始化。

你需要把代码放在$(document).ready()回调里，并且放在Bootstrap JS文件之后加载，修改如下：

<!-- 其他代码保持不变，在</body>标签前添加这段脚本 -->
<script>
$(document).ready(function() {
  $('.collapse').on('show.bs.collapse', function () {
    $('.collapse').not($(this)).collapse('hide');
  });
});
</script>
</body>
</html>

这样能确保DOM完全加载、Bootstrap组件初始化后，再去监听collapse的展开事件，就能正常触发关闭其他面板的逻辑了。另外你用的jQuery Slim版完全够用，不用换成完整版。

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