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

我开发了一个包含三个可折叠div的模式。当我关闭模态并再次打开它时，活动的可折叠div仍处于打开状态。我更希望所有打开的可折叠文件都被关闭，除了在模态关闭时具有“panel collapse collapse in”类的div

PS-我使用的是Bootstrap3

<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>

&时代；
美国广播公司

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

接近

---

您在引导的文档中看到什么了吗？在这里：

您可以实现一些模态事件：

比如：

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

---

必须将“折叠”切换到面板的“打开”，并在隐藏模态时折叠所有可折叠组件

$（'myModal'）.on（'hidden.bs.modal'，function（）{
$（'.collapse'）。collapse（'hide'）；
})
$（'#myModal'）.on（'show.bs.modal'，function（）{
$（'折叠1'）。折叠（'显示'）；
})

引导演示
启动演示模式
&时代；
美国广播公司

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

接近

在启动关闭modalI的操作时，您需要调用js函数来关闭所有打开的手风琴。modalI已尝试但不起作用

$（'#myModal'）。on（'hidden.bs.modal'，function（e）{$（'#collapse2'）。collapse（'hide'）；}）我已经尝试过，但它不起作用。
$（'myModal'）。在（'hidden.bs.modal'，函数（e）{$（'collapse2'）。collapse（'hide'）；
}）；“隐藏”和“显示”选项在我的计算机上不起作用。我甚至试着复制你的代码并在我的电脑上运行，但没有成功。当我检查您的代码段时，它显示隐藏和显示的事件，但当我在计算机上本地检查代码时，检查器没有显示隐藏和显示的事件，而是在模式上显示单击事件。为了清楚起见，您想在隐藏模式时关闭所有手风琴，并在打开时仅显示带有面板的手风琴吗？您也尝试过在此处运行代码段吗？请查看stackoverflow.com上的代码段运行正常。您添加这些代码段的方式可能存在一些问题。如果要在html中添加JavaScript，请确保在关闭
标记之前添加它。这里是jsbin链接