bootstrap-collapse.js 之无法实现折叠效果

问题：Uncaught ReferenceError: jQuery is not defined at collapse.js:212

原因：加载jQuery的顺序错误，依赖于jQuery的其它JavaScript脚本先于jQuery加载完成并执行。这时jQuery尚未加载，因此依赖于jQuery的代码调用jQuery的话就会出错。

解决方案：将jQuery库放在依赖于jQuery的JavaScript脚本之前，并且将这些代码放入document.ready来确保DOM加载完毕。

附：标题部分使用了div层的切换 ——$().toggle();（有没有更好的办法啊？？）
例：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title" >
                <a data-toggle="collapse"data-parent="#accordion"href="#etiology" id="a2">
                    <div id="i2">
                        <img src="imgs/ic2.png" class="img1">第一部分标题<img src="imgs/down.png" class="img2">
                    </div>
                    <div id="i2-2">
                        <img src="imgs/2.png" class="img1">第一部分标题<img src="imgs/up.png" class="img2">
                    </div>
                </a>
            </div>
        </div>
        <div id="etiology" class="panel-collapse collapse">
            <div class="panel-body" >第一部分内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title">
                <a data-toggle="collapse"data-parent="#accordion"href="#clinic" id="a3">
                    <div id="i3">
                        <img src="imgs/ic3.png" class="img1" >第二部分标题<img src="imgs/down.png" class="img2">
                    </div>
                    <div id="i3-2">
                        <img src="imgs/3.png" class="img1" >第二部分标题<img src="imgs/up.png" class="img2">
                    </div>
                </a>
            </div>
        </div>
        <div id="clinic" class="panel-collapse collapse">
            <div class="panel-body" >第二部分内容</div>
        </div>
    </div>
</div>

效果图：

参考链接
聊聊”jQuery is not defined”：
https://blog.fundebug.com/2017/03/06/jquery-is-not-defined/