Bootstrap 4-当另一部分膨胀时，折叠一部分

Question

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/

Answer 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')
}
});

像这样的东西？

编辑：顺便说一句，我删除了你的数据切换="；塌陷"；在我的小提琴里。就像你解释的那样。。。