大家好（对不起，英语，我会努力的） 我的下拉菜单有严重问题。当一个手风琴打开时，我想隐藏其他人。我才刚开始进行引导，这是我第一次看到数据切换，我认为它需要处理。
请帮助我
这是导航部分：
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
min-height: 100vh;
}
#sidebar.active {
margin-left: -250px;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdowns-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
/* don't forget to add all the previously mentioned styles here too */
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar .sidebar-header {
padding: 20px;
background: #E6A343;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: white
}
#sidebar ul li a:hover {
color: #A66D00;
background: white;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #BF7A30;
}
.wrapper {
display: flex;
width: 100%;
}
#sidebar {
width: 250px;
top: 90px;
left: 0;
height: 100vh;
z-index: 999;
background: #FFB03D;
color: #fff;
transition: all 0.3s;
}
.dropdown-submenu {
position: relative;
}<!doctype html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style/style-sidebar.css">
<link rel="stylesheet" href="style/style-header.css">
<link rel="stylesheet" href="style/style-content.css">
<!-- Bootstrap CSS -->
<title>Gestion-Filinea</title>
</head>
<body>
<header>
<div class="page-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#"><img src="images/logo3.png" width="200" height="60" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Organisme</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu-déroulant</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Personne</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu-déroulant</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Menu</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#OrgSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Organismes</a>
<ul class="collapse list-unstyled" id="OrgSubmenu">
<li>
<li>
<a href="#">Lister Organismes</a>
</li>
<li>
<a href="#">Ajouter Organisme</a>
</li>
<li>
<a href="#">Chercher Organisme</a>
</li>
</ul>
</li>
<li class="active">
<a href="#CoachSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Coachs</a>
<ul class="collapse list-unstyled" id="CoachSubmenu">
<li>
<a href="#">Lister Coachs</a>
</li>
<li>
<a href="#">Ajouter coach</a>
</li>
<li>
<a href="#">Chercher coach</a>
</li>
</ul>
</li>
<li class="active">
<a href="#PersonneSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Personnes</a>
<ul class="collapse list-unstyled" id="PersonneSubmenu">
<li>
<a href="#">Lister Personnes</a>
</li>
<li>
<a href="#">Ajouter personne</a>
</li>
<li>
<a href="#">Chercher personne</a>
</li>
</ul>
</li>
<li class="active">
<a href="#MandantSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Mandants</a>
<ul class="collapse list-unstyled" id="MandantSubmenu">
<li>
<a href="#">Lister Mandants</a>
</li>
<li>
<a href="#">Ajouter Mandant</a>
</li>
<li>
<a href="#">Chercher Mandant</a>
</li>
</ul>
</li>
<li class="active">
<a href="#MêtierSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Mêtiers</a>
<ul class="collapse list-unstyled" id="MêtierSubmenu">
<li>
<a href="#">Lister Mêtiers</a>
</li>
<li>
<a href="#">Ajouter Mêtier</a>
</li>
<li>
<a href="#">Chercher Mêtier</a>
</li>
</ul>
</li>
<li>
<a href="#">Déconnexion</a>
</li>
</ul>
</nav>
<div id="page-content-wrapper">
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>
如果需要其他内容，请告诉我。
答案 0 :(得分：0)
让我们忘记您编写的代码是否通用。我专注于您想要的工作。 基本上，这种工具是一件容易的事。 您只需要获取每个click事件，然后首先删除所有活动类，然后将活动类放入仅单击的元素即可。但是，我检查了the accordion of Bootstrap Document，发现它是“ data-parent”，看来“ data-parent”可以适用于您的情况。
我在每个ul元素中添加了“ data-parent =“＃sidebar””。
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
min-height: 100vh;
}
#sidebar.active {
margin-left: -250px;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdowns-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
/* don't forget to add all the previously mentioned styles here too */
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar .sidebar-header {
padding: 20px;
background: #E6A343;
}
#sidebar ul.components {
padding: 20px 0;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: white
}
#sidebar ul li a:hover {
color: #A66D00;
background: white;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #BF7A30;
}
.wrapper {
display: flex;
width: 100%;
}
#sidebar {
width: 250px;
top: 90px;
left: 0;
height: 100vh;
z-index: 999;
background: #FFB03D;
color: #fff;
transition: all 0.3s;
}
.dropdown-submenu {
position: relative;
}<!doctype html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style/style-sidebar.css">
<link rel="stylesheet" href="style/style-header.css">
<link rel="stylesheet" href="style/style-content.css">
<!-- Bootstrap CSS -->
<title>Gestion-Filinea</title>
</head>
<body>
<header>
<div class="page-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="#"><img src="images/logo3.png" width="200" height="60" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Organisme</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu-déroulant</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Personne</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu-déroulant</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Menu1</a>
<a class="dropdown-item" href="#">Menu2</a>
<a class="dropdown-item" href="#">Menu3</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Menu</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#OrgSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Organismes</a>
<ul class="collapse list-unstyled" id="OrgSubmenu" data-parent="#sidebar">
<li>
<li>
<a href="#">Lister Organismes</a>
</li>
<li>
<a href="#">Ajouter Organisme</a>
</li>
<li>
<a href="#">Chercher Organisme</a>
</li>
</ul>
</li>
<li class="active">
<a href="#CoachSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Coachs</a>
<ul class="collapse list-unstyled" id="CoachSubmenu" data-parent="#sidebar">
<li>
<a href="#">Lister Coachs</a>
</li>
<li>
<a href="#">Ajouter coach</a>
</li>
<li>
<a href="#">Chercher coach</a>
</li>
</ul>
</li>
<li class="active">
<a href="#PersonneSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Personnes</a>
<ul class="collapse list-unstyled" id="PersonneSubmenu" data-parent="#sidebar">
<li>
<a href="#">Lister Personnes</a>
</li>
<li>
<a href="#">Ajouter personne</a>
</li>
<li>
<a href="#">Chercher personne</a>
</li>
</ul>
</li>
<li class="active">
<a href="#MandantSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Mandants</a>
<ul class="collapse list-unstyled" id="MandantSubmenu" data-parent="#sidebar">
<li>
<a href="#">Lister Mandants</a>
</li>
<li>
<a href="#">Ajouter Mandant</a>
</li>
<li>
<a href="#">Chercher Mandant</a>
</li>
</ul>
</li>
<li class="active">
<a href="#MêtierSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Mêtiers</a>
<ul class="collapse list-unstyled" id="MêtierSubmenu" data-parent="#sidebar">
<li>
<a href="#">Lister Mêtiers</a>
</li>
<li>
<a href="#">Ajouter Mêtier</a>
</li>
<li>
<a href="#">Chercher Mêtier</a>
</li>
</ul>
</li>
<li>
<a href="#">Déconnexion</a>
</li>
</ul>
</nav>
<div id="page-content-wrapper">
<div class="page-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>