<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="#collapse1">Course Introduction
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<p>abc</p>
</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="#collapse2">Description
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem </p>
</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="#collapse3">Goals
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit </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 -->
这是javascript。我只想在手风琴中单击选项卡时将类添加到可折叠选项卡,并希望在模式关闭但事件显示.bs.collapse或显示.bs.mod未触发时关闭所有手风琴。
$('#myModal').on('hidden.bs.modal', function () {
$('.collapse').collapse('hide');
});
$('#myModal').on('shown.bs.modal', function () {
$('#collapse1').collapse('show');
});
$('#accordion').find('.panel-default:has(".in")').addClass('panel-danger');
$('#accordion').on('show.bs.collapse', function (e) {
$(e.target).closest('.panel-default').addClass(' panel-danger');
}).on('hide.bs.collapse', function (e) {
$(e.target).closest('.panel-default').removeClass(' panel-danger');
})
您忘记在代码中使用该事件。 它应该是$('#myModal').on('click','hidden.bs.modal', function () {
而不是$('#myModal').on('hidden.bs.modal', function () {
。这是工作示例...
$('#myModal').on('click','hidden.bs.modal', function () {
$('.collapse').collapse('hide');
});
$('#myModal').on('click','shown.bs.modal', function () {
$('#collapse1').collapse('show');
});
$('#accordion').find('.panel-default:has(".in")').addClass('panel-danger');
$('#accordion').on('click','show.bs.collapse', function (e) {
$(e.target).closest('.panel-default').addClass(' panel-danger');
}).on('hide.bs.collapse', function (e) {
$(e.target).closest('.panel-default').removeClass(' panel-danger');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<button class = "btn btn-file btn-md q_info" data-toggle="modal" data-target="#myModal">click</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="#collapse1">Course Introduction
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<p>abc</p>
</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="#collapse2">Description
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem </p>
</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="#collapse3">Goals
</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit </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>
最后我解决了这个问题。我把我的jquery代码放进去
$(document).ready(function(){ ................法典。。。。。。。。。。。。});