如何避免点击单个Bootstrap子菜单时所有子菜单同步折叠

问题根源 #

修改后所有二级子菜单使用了重复的id="sub-sub-menu"，HTML规范要求页面内id属性必须唯一，Bootstrap的Collapse组件通过触发元素的href属性匹配对应id的折叠容器，重复id会导致所有匹配到的容器同时触发折叠/展开动作，这就是点击任意子项所有二级菜单同步联动的原因。

修复方案 #

给每个二级子菜单分配唯一的id，同时将对应触发按钮的href属性修改为匹配的id值即可，CSS代码无需修改，修复后的完整HTML代码如下：

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="side2.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="row">
          <div class="col-md-3">
              <!-- column1, Vertical Dropdown Menu -->
              <div id="main-menu" class="list-group">
                  <a href="#sub-menu" class="list-group-item active" data-toggle="collapse" data-parent="#main-menu">Item 1 <span class="caret"></span></a>
                  <div class="collapse list-group-level1" id="sub-menu">
                    <a href="#sub-sub-menu1" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 1 <span class="caret"></span></a>
                    <div class="collapse list-group-level2" id="sub-sub-menu1">
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">Sub Sub Item 1</a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">Sub Sub Item 2</a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">Sub Sub Item 3</a>
                    </div>
                      
                      <a href="#sub-sub-menu2" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 2 <span class="caret"></span></a>
                      <div class="collapse list-group-level2" id="sub-sub-menu2">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu2">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu2">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu2">Sub Sub Item 3</a>
                      </div>
                      <a href="#sub-sub-menu3" class="list-group-item" data-toggle="collapse" data-parent="#sub-menu">Sub Item 3 <span class="caret"></span></a>
                      <div class="collapse list-group-level2" id="sub-sub-menu3">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu3">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu3">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu3">Sub Sub Item 3</a>
                      </div>
                  </div>
                  <a href="#" class="list-group-item">Item 2</a>
                  <a href="#" class="list-group-item">Item 3</a>
                  <a href="#" class="list-group-item">Item 4</a>
                  <a href="#" class="list-group-item">Item 5</a>
              </div>    
          </div>
          <div class="col-md-9">
              <!-- column 2, content goes here... -->
          </div>
      </div>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

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