Bootstrap 4 - 当另一部分展开时折叠一个部分？

【问题标题】：Bootstrap 4 - collapse one section when the other expands?Bootstrap 4 - 当另一部分展开时折叠一个部分？
【发布时间】：2020-11-19 09:33:43
【问题描述】： 

const cur_url = window.location.href.split('#')[0].split('?')[0],
  body = $('body'),
  menu_toggle = $('.menu-toggle'),
  sidebar_menu = $('#sidebar-menu');

initSidebar = function() {
  let openUpMenu = function() {
    sidebar_menu.find('li').removeClass('active active-sm');
    sidebar_menu.find('li ul').slideUp();
  }

  sidebar_menu.find('a').on('click', function(ev) {
    let $li = $(this).parent();
    $li.is('.active') ? $li.removeClass('active active-sm') : $li.addClass('active');
  });

  // toggle small or large menu
  menu_toggle.on('click', function() {
    if (body.hasClass('nav-md')) {
      sidebar_menu.find('li.active ul').hide();
      sidebar_menu.find('li.active').addClass('active-sm').removeClass('active');
    } else {
      sidebar_menu.find('li.active-sm ul').show();
      sidebar_menu.find('li.active-sm').addClass('active').removeClass('active-sm');
    }

    body.toggleClass('nav-md nav-sm');
  });
};

$(document).ready(function() {
  initSidebar();
});
.left_col {
  background: #2A3F54;
}

.nav-sm .container.body .col-md-3.left_col {
  height: calc(100vh - 77px) !important;
  width: 50px;
  padding: 0;
  z-index: 9999;
  position: absolute;
  border-top: 1px solid #fff;
}

.nav-sm .container.body .right_col {
  margin-left: 50px;
  z-index: 2;
}

.nav-sm .hidden-small {
  visibility: hidden;
}

.nav-sm .side-menu li a {
  text-align: center !important;
  font-weight: 400;
  font-size: 10px;
}

.nav-sm .side-menu li a i.toggle-up {
  display: none !important;
}

.nav-sm .side-menu li a i {
  font-size: 20px !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 2px;
}

.nav-sm .side-menu li.active-sm {
  border-right: 5px solid #1ABB9C;
}

.nav-sm .side-menu li.active-sm ul ul {
  position: static;
  width: 200px;
  background: none;
}

.nav-sm .child-menu li.active {
  border-right: 5px solid #1ABB9C;
}

.nav-sm ul.child-menu {
  left: calc(100% + 5px);
  position: absolute;
  top: 0;
  width: 210px;
  z-index: 4000;
  background: #3E5367;
}

.nav-sm ul.child-menu ul {
  position: static;
  width: 200px;
  background: none;
}

.nav-sm ul.child-menu li {
  padding: 0 10px;
}

.nav-sm ul.child-menu li a {
  text-align: left !important;
}

.nav-sm>.side-menu>li.active-sm>a {
  color: #1ABB9C !important;
}

.nav-sm .menu-section {
  margin: 0;
}

.nav-sm .menu-section h3 {
  display: none;
}

.nav-sm .sidebar-footer a i.fa::before {
  content: "\f054";
}

.menu-section h3 {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  color: #fff;
  background-color: rgba(248, 239, 239, 0.059);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: 1px 1px #000;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.menu-section>ul {
  display: block;
}

.nav-md .main-menu {
  width: 200px;
}

.nav-md .container.body .col-md-3.left_col {
  height: calc(100vh - 77px) !important;
  width: 200px;
  padding: 0;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 1;
}

.nav-md .container.body .right_col {
  margin-left: 200px;
}

.nav-md ul.child-menu li:before {
  background: #9eb6ca;
  bottom: auto;
  content: "";
  height: 6px;
  left: 12px;
  margin-top: 8px;
  position: absolute;
  right: auto;
  width: 6px;
  z-index: 1;
  border-radius: 50%;
}

.nav-md ul.child-menu li:after {
  border-left: 1px solid #9eb6ca;
  bottom: 0;
  content: "";
  left: 14px;
  position: absolute;
  top: 0;
}

.nav-md ul.child-menu li:last-child::after {
  bottom: 50%;
}

.main-menu .fa {
  width: 20px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nav_menu {
  float: left;
  background: #2A3F54;
  width: 100%;
  position: relative;
}

body {
  color: #73879C;
  background: #fff;
  font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.471;
  overflow: hidden;
}

body .container.body .right_col {
  margin-top: 37px;
  padding: 10px;
  height: calc(100vh - 96px) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.container {
  width: 100%;
  padding: 0;
  max-width: 100%;
}

.navbar-nav>li>a {
  color: #fff !important;
  color: #fff !important;
  font-weight: 500;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 32px;
}

.navbar-nav .open .dropdown-menu {
  position: absolute;
  background: #fff;
  margin-top: 0;
  border: 1px solid #D9DEE4;
  right: 0;
  left: auto;
  width: 220px;
}

.navbar-nav .open .dropdown-menu.msg_list {
  width: 300px !important;
}

.navbar-brand {
  color: #fff !important;
  font-weight: 500;
  color: #ECF0F1 !important;
  margin-left: 0 !important;
  line-height: 32px;
}

.main_content {
  padding: 10px 20px;
}

h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.h1 {
  margin-top: 10px;
  margin-bottom: 10px;
}

h2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.h2 {
  margin-top: 10px;
  margin-bottom: 10px;
}

h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

a {
  color: #5A738E;
  text-decoration: none;
  outline: 0;
}

a:visited {
  outline: 0;
}

a:focus {
  outline: 0;
  text-decoration: none;
}

a:active {
  outline: 0;
}

a:hover {
  text-decoration: none;
}

.btn:focus {
  outline: 0;
}

.btn:active:focus {
  outline: 0;
}

.btn:active.focus {
  outline: 0;
}

.btn.active:focus {
  outline: 0;
}

.btn.focus {
  outline: 0;
}

.btn.active.focus {
  outline: 0;
}

.navbar-header {
  background: #34495E;
}

.navbar-right {
  margin-right: 0;
}

.pg-header .navbar-right {
  margin: 13px;
  width: auto;
  float: right;
}

.pg-header .navbar-right li {
  display: inline-block;
  position: static;
  float: right;
}

.pg-header .dropdown-menu li {
  width: 100%;
}

.pg-header li a i {
  font-size: 15px;
}

.dropdown-item {
  width: 100%;
  padding: 12px 20px;
}

.navbar-static-top {
  position: fixed;
  top: 0;
  width: 100%;
}

.sidebar-header {
  border-bottom: 0;
  margin-top: 46px;
}

.sidebar-header:first-of-type {
  margin-top: 0;
}

.sidebar-footer {
  width: inherit;
  position: absolute;
  text-align: right;
  padding: 4px 14px 4px;
  bottom: 0;
}

.sidebar-footer a {
  cursor: pointer;
}

.sidebar-footer a i {
  font-size: 20px !important;
  color: #fff;
}

.child-menu {
  padding-left: 0;
}

.child-menu>li {
  position: relative;
  display: block;
}

.child-menu>li>a {
  position: relative;
  display: block;
  padding: 7px 10px 6px;
}

.child-menu>li>a:focus {
  text-decoration: none;
  background: transparent;
  background-color: transparent;
}

.child-menu>li>a:hover {
  background-color: transparent;
}

.side-menu>li {
  position: relative;
  display: block;
  cursor: pointer;
}

.side-menu>li>a {
  color: #E7E7E7;
  font-weight: 500;
}

.side-menu>li>a:hover {
  color: #F2F5F7 !important;
  text-decoration: none;
  background: transparent;
}

.side-menu>li.active {
  border-right: 5px solid #1ABB9C;
}

.side-menu>li.active>a {
  text-shadow: rgba(0, 0, 0, 0.25) 0 -1px 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#334556), to(#2C4257)), #2A3F54;
  background: linear-gradient(#334556, #2C4257), #2A3F54;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 0.25) 0 1px 0, inset rgba(255, 255, 255, 0.16) 0 1px 0;
}

.child-menu li {
  padding-left: 18px;
}

.child-menu li:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.child-menu li li:hover {
  background: none;
}

.child-menu li li a:hover {
  color: #fff;
}

.child-menu li li a.active {
  color: #fff;
}

.child-menu li li.active {
  background: none;
}

.child-menu li.active {
  background-color: rgba(255, 255, 255, 0.06);
}

.child-menu>li>a {
  color: #E7E7E7;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  padding: 4px 5px;
}

.navbar-nav>li>a {
  color: #515356 !important;
}

.top_menu>li>a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #34495E !important;
}

.toggle {
  float: left;
  margin: 0;
}

.toggle a {
  padding: 5px;
  margin: 0;
  cursor: pointer;
}

.toggle a i {
  font-size: 26px;
}

header.pg-header {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 9999;
}

footer.pg-footer {
  padding: 10px 20px;
  display: block;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  z-index: 9999;
  background: #2A3F54;
}

.dropdown-menu {
  border: medium none;
  -webkit-box-shadow: none;
  box-shadow: none;
  display: none;
  float: left;
  font-size: 12px;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 9998;
  border: 1px solid #D9DEE4;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.dropdown-menu>li>a {
  color: #5A738E;
}

a.user-profile {
  color: #fff !important;
}

.user-profile img {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  margin-right: 10px;
}

.nav-logo {
  width: auto;
  float: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 3px 0 0 8px;
}

@media (min-width: 480px) {
  .nav_menu {
    position: static;
  }
  .item {
    display: block;
    display: block;
  }
  .pg-header .navbar-right li {
    position: relative;
  }
}

@media (max-width: 991px) {
  .nav-md .container.body .pg-header {
    width: 100%;
    margin: 0;
  }
  .nav-md .container.body .col-md-3.left_col {
    display: none;
  }
  .nav-md .container.body .right_col {
    width: 100%;
    margin: 56px 0 0 0;
    padding: 10px;
  }
  .nav-sm .container.body .col-md-3.left_col {
    height: calc(100vh - 77px) !important;
  }
  .item {
    display: block;
  }
}

.nav-link[data-toggle]:not(.collapsed):after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 17px;
}
<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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="images/favicon.png" type="image/ico" />
  <title>SPA</title>
</head>

<body class="nav-md">
  <div class="container body">
    <div class="col-md-3 left_col">
      <!-- sidebar menu -->
      <div id="sidebar-menu" class="main-menu">
        <div class="menu-section" id="section-1">
          <h3>Menu 1</h3>
          <ul class="nav side-menu accordion-group">
            <li>
              <a href="#menu-section-1" data-toggle="collapse" class="nav-link collapsed"><i class="fa fa-edit"></i> Menu Section 1</a>
              <ul class="child-menu collapse" id="menu-section-1">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
              </ul>
            </li>
            <li>
              <a href="#menu-section-2" data-toggle="collapse" class="nav-link collapsed"><i class="fa fa-clone"></i> Menu Section 2</a>
              <ul class="child-menu collapse" id="menu-section-2">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="menu-section" id="section-2">
          <h3>Menu 2</h3>
          <ul class="nav side-menu">
            <li>
              <a href="#multilevel-menu" data-toggle="collapse" class="nav-link collapsed"><i class="fa fa-sitemap"></i> Multilevel Section</a>
              <ul class="child-menu collapse" id="multilevel-menu">
                <li><a href="#level1_1">Level One</a></li>
                <li>
                  <a href="#level-1" data-toggle="collapse" class="nav-link collapsed">Level One</a>
                  <ul class="child-menu collapse" id="level-1">
                    <li class="sub_menu"><a href="#level2">Level Two</a></li>
                    <li><a href="#level2_1">Level Two</a></li>
                    <li><a href="#level2_2">Level Two</a></li>
                  </ul>
                </li>
                <li><a href="#level1_2">Level One</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="sidebar-footer">
          <a class="menu-toggle"><i class="fa fa-chevron-left"></i></a>
        </div>
      </div>
      <!-- /sidebar menu -->
    </div>

    <!-- Header: top navigation -->
    <header class="pg-header">
      <div class="nav_menu">
        <div class="nav toggle">
          <a id="menu_toggle" class="menu-toggle ml-2 mr-2"><i class="fa fa-bars text-light"></i></a>
        </div>
      </div>
    </header>
    <!-- /Header: top navigation -->

    <!-- Main: page content -->
    <div class="right_col" id="main-fta-container" role="main">
      <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
          <h5 class="card-title">Primary card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <!-- /Main: page content -->

    <!-- Footer: content -->
    <footer class="pg-footer">
      <div class="pull-right text-light">SPA - Powerd by <a href="https://https://developer.mozilla.org/en-US/docs/Glossary/SPA">SPA</a></div>
    </footer>
    <!-- /Footer: content -->
  </div>
</body>

</html>

我有一个应该可以有多个部分的菜单。每个部分都有可以容纳多个级别项目的子部分。我使用 Bootstrap 4 折叠方法来显示/隐藏菜单部分。我想看到的一件事是当一个用户点击一个部分时，另一个部分应该折叠。截至目前，代码无法关闭上一节。还有一件事，例如，如果用户单击Item 2，则该项目是当前/活动的。然后，如果用户单击Item 4，Item 2 仍被标记为活动/当前。如何只保持用户点击的项目处于活动状态并取消标记上一个项目？

这是我的代码示例的链接：https://jsfiddle.net/dmilos89/cyxj7f98/

【问题讨论】：

    标签： jquery css bootstrap-4


    【解决方案1】： 
        sidebar_menu.find('a').on('click', function (ev) {
        // access any active `li`s in this `ul` and set inactive
        $(this).closest('ul').find('.active').removeClass('active active-sm')
        // set this `li` active
        $(this).closest('li').addClass('active active-sm')
        if ($(this).hasClass('nav-link')) {
          // collapse all menus
          $('#sidebar-menu .child-menu').addClass('collapse')
          // un-collapse selected 
          $(this).closest('li').find('.child-menu').removeClass('collapse')
        }
    });

    这样的？

    编辑：顺便说一句，我在我的小提琴中删除了你的 data-toggle="collapse" 。它似乎按照你的解释工作......

    【讨论】：

      猜你喜欢
      • 2015-01-01
      • 2012-07-13
      • 2019-10-29
      • 2020-08-30
      • 1970-01-01
      • 1970-01-01
      • 2023-03-20
      • 1970-01-01
      • 2020-01-25
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode