iT邦幫忙

0

Javascript load導入後collapse無法收合:( ( 已解決)

事情是這樣的,我把header以及footer另外寫成html檔案
再用load導入頁面的指定區域當中

然後....
我的collapse就無法收合了/images/emoticon/emoticon02.gif

https://ithelp.ithome.com.tw/upload/images/20220119/20144862NQAmwZC3mp.jpg
這是還沒點開的畫面
https://ithelp.ithome.com.tw/upload/images/20220119/20144862mrLYuPgVyj.jpg
這是點開但收不回去的畫面:(

想請問大大我該怎麼解決這樣的問題

附上程式碼
Html

<div class="container">
        <div class="row">
            <!--Header-->
            <div class="headerpage"></div>
            <!--/Header -->
            <div>
                <p>
                  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    Link with href
                  </a>
                  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    Button with data-bs-target
                  </button>
                </p>
                <div class="collapse" id="collapseExample">
                  <div class="card card-body">
                    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                  </div>
                </div>
            </div>
            <!--Footer-->
            <div class="footerpage"></div>
            <!--/Footer -->
        </div>
    </div>

Javascript

$(function(){
    $(".headerpage").load("header.html");
    $(".footerpage").load("footer.html");
});
看更多先前的討論...收起先前的討論...
qpalzm iT邦新手 1 級 ‧ 2022-01-19 16:21:11 檢舉
不知道是不是跟JQ有關,
$(document).ready(function(){
$(".headerpage").load("header.html");
$(".footerpage").load("footer.html");
});
提供給您做參考
這個程式碼我也有試過,但....結果也是一樣的
天黑 iT邦研究生 5 級 ‧ 2022-01-20 11:56:19 檢舉
請問 偵錯模式console有錯誤訊息嗎?
DevTools failed to load source map: Could not load content for 網頁網址/css/bootstrap.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

只顯示這個但它是黃色的
天黑 iT邦研究生 5 級 ‧ 2022-01-20 13:50:19 檢舉
可以先確定點擊後css有沒有改變,如果有改變代表點擊事件正常運作,css有異常,如果是沒改變 可能要寫監聽事件,確認點擊事件有沒有正常
就是元素都能正常運作,只有collapse無法收合這樣,能打開但合不起來
bill0704 iT邦新手 5 級 ‧ 2022-01-20 15:06:50 檢舉
我在codepen可以用耶
bootstrap版本用新的看看??
另外 css跟js的bootstrap版本要一致喔
我找到解決方法了!!!

我的header.html & footer.html 都是有把bootstrap CDN加進去,我後來把所有關於bootstrap的程式碼都拿掉之後....就好了,感謝大家協助!!!!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答