我对 bootstrap 4 的手风琴有问题。首先，如果我打开折叠的 Accrodion，它将打开，当我单击另一个折叠的手风琴时，它也会打开。
但是我想要'当我打开第二个折叠的手风琴时，其他部分，即之前打开的手风琴应该关闭。
【问题讨论】：
标签： html bootstrap-4
$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
$(e.target)
.prev()
.find("i:last-child")
.toggleClass("fa-minus fa-plus");
});body {
background: #F9F9F9;
}
.myaccordion {
max-width: 500px;
margin: 50px auto;
box-shadow: 0 0 1px rgba(0,0,0,0.1);
}
.myaccordion .card,
.myaccordion .card:last-child .card-header {
border: none;
}
.myaccordion .card-header {
border-bottom-color: #EDEFF0;
background: transparent;
}
.myaccordion .fa-stack {
font-size: 18px;
}
.myaccordion .btn {
width: 100%;
font-weight: bold;
color: #004987;
padding: 0;
}
.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
text-decoration: none;
}
.myaccordion li + li {
margin-top: 10px;
}<html>
<head>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<head>
<body>
<div id="accordion" class="myaccordion">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="d-flex align-items-center justify-content-between btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Panel Title
<span class="fa-stack fa-sm">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-minus fa-stack-1x fa-inverse"></i>
</span>
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<ul>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Panel Title
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-plus fa-stack-1x fa-inverse"></i>
</span>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<ul>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Panel Title
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-plus fa-stack-1x fa-inverse"></i>
</span>
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<ul>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
<li>Panel Content</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>【讨论】：
我已经用 bootstrap 4 解决了手风琴问题。这是链接：
https://jsfiddle.net/58hxoLyu/5/
.accordion .card-header:after {
font-family: 'FontAwesome';
content: "\f068";
float: right;
}
.accordion .card-header.collapsed:after {
content: "\f067";
}
.accordion {
margin-bottom: 20px;
}
.custom-repo li {
display: inline-flex;
width: 150px;
position: relative
}
.custom-repo li:after {
content: '';
position: absolute;
width: 5px;
height: 5px;
background: #000;
border-radius: 50%;
top: 7px;
left: -15px;
}
.annual-repo li {
width: 200px;
}
.card-header {
background-color: #a9d3fd;
border-bottom: 1px solid #bbddff;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="accordion-custom">
<div id="accordion" class="accordion">
<div class="card mb-0">
<!-- 1 -->
<div class="card-header collapsed" data-toggle="collapse" href="#collapseOne">
<a class="card-title">
Corporate Governance
</a>
</div>
<div id="collapseOne" class="collapse" data-parent="#accordion">
<div class="card-body">
<ul class="custom-repo">
<li><a href="#" target="_blank" class="report">June - 2019</a></li>
<li><a href="#">March - 2019</a></li>
<li><a href="#" target="_blank" class="report">Dec - 2018</a></li>
</ul>
</div>
</div>
<!-- 2 -->
<div class="card-header collapsed" data-toggle="collapse" href="#collapseTwo">
<a class="card-title">
Corporate
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
<ul class="custom-repo">
<li><a href="#" target="_blank" class="report">June - 2019</a></li>
<li><a href="#">March - 2019</a></li>
<li><a href="#" target="_blank" class="report">Dec - 2018</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>【讨论】：
这是使用 CSS（加减号）工作的
<style>
.card-header:after {
font-family: 'FontAwesome';
content: "\f068";
}
.card-header.collapsed:after {
/* symbol for "collapsed" panels */
content: "\f067";
display: block;
}
</style>
【讨论】：
这将起作用：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<span class="glyphicon glyphicon-arrow-down"></span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
//your code
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<span class="glyphicon glyphicon-arrow-down"></span></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
//your code
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<span class="glyphicon glyphicon-arrow-down"></span></a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
//your code
</div>
</div>
</div>
</html>
【讨论】：