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" >
                "collapse"data-parent="#accordion"href="#etiology" id="a2">
                    <div id="i2">
                        "imgs/ic2.png" class="img1">第一部分标题"imgs/down.png" class="img2">
                    div>
                    <div id="i2-2">
                        "imgs/2.png" class="img1">第一部分标题"imgs/up.png" class="img2">
                    div>
                
            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">
                "collapse"data-parent="#accordion"href="#clinic" id="a3">
                    <div id="i3">
                        "imgs/ic3.png" class="img1" >第二部分标题"imgs/down.png" class="img2">
                    div>
                    <div id="i3-2">
                        "imgs/3.png" class="img1" >第二部分标题"imgs/up.png" class="img2">
                    div>
                
            div>
        div>
        <div id="clinic" class="panel-collapse collapse">
            <div class="panel-body" >第二部分内容div>
        div>
    div>
div>

效果图:
bootstrap-collapse.js 之无法实现折叠效果_第1张图片

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

你可能感兴趣的:(前端)