模态内部的手风琴-单击任何其他可折叠选项卡时，第一个保持打开状态

Question

当我打开模态时，默认情况下会打开第一个选项卡，如果我单击任何其他选项卡，则第一个选项卡会关闭，然后单击的选项卡会打开，但是如果我再次单击第一个选项卡，则两个选项卡都会打开。 这是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">&times;</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>

这是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');
})

Answer 1

您还需要调用$('.collapse').collapse('hide'); 在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');
})

我在这里制作了一个小提琴来展示这一点 。

希望这可以帮助！ :)