Question

我开发了一个包含三个可折叠div的模态。当我解除模态并再次打开它时，活动的可折叠div仍然是打开的。我希望所有打开的可折叠程序都被关闭，除了在模式关闭时“面板折叠崩溃”类中的div。

PS-我正在使用Bootstrap 3。

<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">&times;</button>
      <h4 id="modal-title"> </h4>
    </div>
    <div class="modal-body">
      <div class="panel-group" id="accordion">
                    <div class="panel panel-primary">
                        <div  class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Course Introduction

                            <span class="pull-right"><i id="icon0" class="fa fa-plus open" aria-hidden="true"></i></span>
                            </a>

                            </h4>
                        </div>

                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            <p> abc abc abc </p>
                            </div>
                        </div>
                    </div>


                    <div class="panel ">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description
                            <span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
                            </h4>
                        </div>

                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem ipsum dolor sit amet, </p>
                            </div>
                        </div>
                    </div>

                    <div class="panel">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals
                            <span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
                            </h4>
                        </div>

                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem ipsum dolor sit amet,</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>

Answer 1

你在bootstrap文档中看到了什么吗？在这里：http://getbootstrap.com/javascript/#collapse-usage

你可以实现一些模态事件：http://getbootstrap.com/javascript/#modals-methods

类似的东西：

$('#myModal').on('hidden.bs.modal', function (e) {
  $('.collapse').collapse();
})

Answer 2

您必须切换折叠以打开面板，并在隐藏模态时折叠所有可折叠组件。

＆＃13;

$('#myModal').on('hidden.bs.modal', function () {
	$('.collapse').collapse('hide');
})
$('#myModal').on('shown.bs.modal', function () {
	$('#collapse1').collapse('show');
})

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Bootstrap Demo</title>
</head>
<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">&times;</button>
      <h4 id="modal-title"> </h4>
    </div>
    <div class="modal-body">
      <div class="panel-group" id="accordion">
                    <div class="panel panel-primary">
                        <div  class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Course Introduction

                            <span class="pull-right"><i id="icon0" class="fa fa-plus open" aria-hidden="true"></i></span>
                            </a>

                            </h4>
                        </div>

                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">
                            <p> abc abc abc </p>
                            </div>
                        </div>
                    </div>


                    <div class="panel ">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Description
                            <span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
                            </h4>
                        </div>

                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem ipsum dolor sit amet, </p>
                            </div>
                        </div>
                    </div>

                    <div class="panel">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Goals
                            <span class="pull-right"><i id="icon" class="fa fa-plus" aria-hidden="true"></i></span></a>
                            </h4>
                        </div>

                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">
                            <p>Lorem ipsum dolor sit amet,</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>	
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

当模态被解散或关闭时，如何关闭所有可折叠的div（手风琴）？

2 个答案: