我手风琴有问题。它显示确定。但是当我打开手风琴时,我希望其他手风琴自动关闭。我不知道为什么这是错误的。下面是我的HTML和CSS。我在Google上搜索了很多,但找不到很好的解决方案。我希望有人可以帮助我找出问题所在。
非常感谢您
.panel-heading .accordion-toggle:after {
font-family: FontAwesome;
content: "\f068";
float: right;
}
.panel-heading .accordion-toggle.collapsed:after {
float: right !important;
content: "\f067";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="container">
<div class="panel-group" id="accordion" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#shapes" aria-expanded="false">
Shapes
</a>
</h4>
</div>
<div id="shapes" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Line</li>
<li>Circle</li>
<li>Rectangle</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#basicshapes" aria-expanded="false">
Basic Shapes
</a>
</h4>
</div>
<div id="basicshapes" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#components" aria-expanded="false">
Components
</a>
</h4>
</div>
<div id="components" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Station</li>
<li>Zone</li>
</ul>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:4)
data-parent="#accordion"
应该在class="panel-collapse collapse"
div上,而不是锚点上。
.panel-heading .accordion-toggle:after {
font-family: FontAwesome;
content: "\f068";
float: right;
}
.panel-heading .accordion-toggle.collapsed:after {
float: right !important;
content: "\f067";
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<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.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/2972279885.js"></script>
<div class="container">
<div class="panel-group" id="accordion" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#shapes" aria-expanded="false">
Shapes
</a>
</h4>
</div>
<div id="shapes" class="panel-collapse collapse" data-parent="#accordion">
<div class="panel-body">
<ul>
<li>Line</li>
<li>Circle</li>
<li>Rectangle</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#basicshapes" aria-expanded="false">
Basic Shapes
</a>
</h4>
</div>
<div id="basicshapes" class="panel-collapse collapse" data-parent="#accordion">
<div class="panel-body">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" href="#components" aria-expanded="false">
Components
</a>
</h4>
</div>
<div id="components" class="panel-collapse collapse" data-parent="#accordion">
<div class="panel-body">
<ul>
<li>Station</li>
<li>Zone</li>
</ul>
</div>
</div>
</div>
</div>
答案 1 :(得分:0)
您可以像这样添加脚本
var $myGroup = $('#accordion');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse').collapse('hide');
});
希望它对您有用