[英]Accordion inside modal - When click on any other collapsible tab, the first one remain open
When I open the modal the first tab by default opens up and if I click on any other tab the first tab closes and the clicked tab opens up, but then If I again click on the first tab then both the tabs opens up. 当我打开模态时,默认情况下会打开第一个选项卡,如果我单击任何其他选项卡,则第一个选项卡会关闭,然后单击的选项卡会打开,但是如果我再次单击第一个选项卡,则两个选项卡都会打开。 Here is the html code
这是HTML代码
<body>
<button id="modalButtton" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modal-title"> </h4>
</div>
<div class="modal-body">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Course Introduction
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Description
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Goals
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod te</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- end of Modal -->
</body>
Here is the jquery code 这是jQuery代码
$('#myModal').on('hidden.bs.modal', function () {
$('.collapse').collapse('hide');
});
$('#myModal').on('shown.bs.modal', function () {
$('#collapseOne').collapse('show');
});
$('#accordion').find('.panel-default:has(".in")').addClass('panel-primary');
$('#accordion').on('show.bs.collapse', function (e) {
$(e.target).closest('.panel-default').addClass(' panel-primary');
}).on('hide.bs.collapse', function (e) {
$(e.target).closest('.panel-default').removeClass(' panel-primary');
})
You also need to call $('.collapse').collapse('hide');
您还需要调用
$('.collapse').collapse('hide');
inside your function for show.bs.collapse
: 在
show.bs.collapse
函数内部:
$('#accordion').on('show.bs.collapse', function(e) {
$(e.target).closest('.panel-default').addClass(' panel-primary');
$('.collapse').collapse('hide');
}).on('hide.bs.collapse', function(e) {
$(e.target).closest('.panel-default').removeClass(' panel-primary');
})
I've created a fiddle showcasing this here . 我在这里制作了一个小提琴来展示这一点 。
Hope this helps! 希望这可以帮助! :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.