gpt4 book ai didi

javascript - 使用可折叠物时 Bootstrap 和 JQuery 的正确调用顺序

转载 作者:行者123 更新时间:2023-11-30 00:03:45 25 4
gpt4 key购买 nike

我遇到了最奇怪的问题,无法解决。我在 bootstrap 中使用一系列可折叠按钮,如果我在 jquery 之前调用 boostrap,一切似乎都正常:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>

但是,如果我在 boostrap 之前调用 jquery(应该这样做),那么可折叠对象在打开后不会关闭。我不确定我是否正在调用彼此不兼容的库,或者可能存在我不知道的另一个问题?完整<head>标签是:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.css" rel="stylesheet" />   
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/dragula/3.7.1/dragula.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.1/dragula.min.js"></script>

还有一个可折叠的样本:

<div class="container" id="maincontainer">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1"><center><b>My Panel</b></center></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
### contents
</ul
</div>
</div>
</div>
</div>

最佳答案

我猜您正在为您的网站使用模板。

因此,您的可折叠组件可能将 Bootstrap 与 jQuery 的 $(document).ready 结合使用,因此需要在 jQuery 代码之前加载 bootstrap,否则您将丢失部分 DOM。

关于在 Bootstrap 之前调用 jQuery 的事情是你的 jQuery 代码包含很多 $(document).ready(function() { code }) ; block ,这意味着 DOM(页面的整个结构)需要加载才能执行代码。

因此,如果您在 Bootstrap 之前调用 jQuery,它将遍历您所有的 jQuery 代码并在很多代码块上给出 false,因为您的 DOM( Bootstrap 集成部分)的很大一部分是在 jQuery 代码已经加载之后加载的执行。

所以我的猜测(因为我看不到您的整个代码)是您的代码没问题,只是按正确顺序调用脚本的问题。

关于javascript - 使用可折叠物时 Bootstrap 和 JQuery 的正确调用顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39301663/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com