如何防止bootstrap在只点击一个子菜单时折叠所有子菜单？

Question

我是 HTML CSS 的新手，正在尝试制作垂直导航栏。我的要求是为该垂直导航栏中的子菜单提供子子菜单。我做了一些谷歌搜索并找到了一个代码并对其进行了一些修改以使其符合我的需要。这是代码：

#main-menu {
    background-color: #2E3039;
}

.list-group-item {
    background-color: #2E3039;
    border: none;
}

a.list-group-item {
    color: rgb(22, 21, 21);
}

a.list-group-item:hover,
a.list-group-item:focus {
    background-color: #43D5B1;
}

a.list-group-item.active,
a.list-group-item.active:hover,
a.list-group-item.active:focus {
    color: #FFF;
    background-color: #43D5B1;
    border: none;
}

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: 0;
}

.list-group-level1 .list-group-item {
    padding-left:30px;
}

.list-group-level2 .list-group-item {
    padding-left:60px;
}

<!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="#" class="list-group-item" data-parent="#sub-menu">Sub Item 1</a>
                      <a href="#" class="list-group-item" data-parent="#sub-menu">Sub Item 2</a>
                      <a href="#sub-sub-menu" 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-menu">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">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>

现在我也想将子子菜单添加到其他子菜单...所以我对 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-menu" 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-menu">
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 1</a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 2</a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 3</a>
                    </div>
                      
                      <a href="#sub-sub-menu" 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-menu">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 3</a>
                      </div>
                      <a href="#sub-sub-menu" 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-menu">
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 1</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">Sub Sub Item 2</a>
                          <a href="#" class="list-group-item" data-parent="#sub-sub-menu">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>

但是在这里，当我试图折叠子项 1 时，子项 2 和子项 3 也被折叠了。

请帮我修改代码，这样当我折叠子项目 1 时，不会折叠其他子项目。谢谢。

Answer 1

在您的 HTML 中，为每个子子菜单添加一个数字到每个子子菜单 ID（例如 sub-sub-menu#）以指定哪个子菜单被激活.现在您的代码告诉每个子菜单同时激活所有子菜单，因为它们被称为相同的 id。

<!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">
    
    <style type="text/css">
    .column
        {
            float: right;
            position: relative;
        }
    </style>
    
  </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">
                            <div class="column">
                                Sub Sub Item 1
                            </div>
                            <div style="clear: both;"></div>
                        </a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">
                            <div class="column">
                                Sub Sub Item 2
                            </div>
                            <div style="clear: both;"></div>
                        </a>
                        <a href="#" class="list-group-item" data-parent="#sub-sub-menu1">
                            <div class="column">
                                Sub Sub Item 3
                            </div>
                            <div style="clear: both;"></div>
                        </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>

如何防止bootstrap在只点击一个子菜单时折叠所有子菜单？

How to prevent bootstrap from collapsing all the submenus when clicking on only one submenu?

html

css

bootstrap-4