如何防止jquery在bootstrap 4 accordion中的快速转换中崩溃？
为了防止jQuery在Bootstrap 4折叠组件（accordion）的快速切换中崩溃，可以采取以下几个步骤：
- 确保正确引入jQuery和Bootstrap库：在HTML文件中，确保正确引入jQuery库和Bootstrap库的JavaScript文件。可以使用CDN链接或本地文件引入。
- 使用合适的版本：确保使用与Bootstrap 4兼容的jQuery版本。Bootstrap官方文档通常会指定所需的jQuery版本。使用不兼容的jQuery版本可能会导致崩溃。
- 使用正确的HTML结构：按照Bootstrap 4文档中accordion组件的要求，正确地组织HTML结构。确保每个折叠项（collapse item）都包含正确的data属性和唯一的ID。
- 使用事件委托：使用事件委托（event delegation）来绑定折叠项的事件处理程序。这样可以确保在动态添加或删除折叠项时，事件仍然能够正确触发。
- 避免快速切换：在快速切换折叠项时，可能会导致jQuery动画冲突或未完成的动画。为了避免这种情况，可以使用
stop()方法来停止当前正在进行的动画，然后再执行下一个动画。
下面是一个示例代码片段，展示了如何使用jQuery和Bootstrap 4创建一个基本的accordion，并防止快速切换时的崩溃：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Content for collapsible item #1
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Content for collapsible item #2
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#accordion').on('show.bs.collapse', function () {
$(this).find('.collapse.show').collapse('hide');
});
});
</script>
</body>
</html>这个示例代码中，我们使用了Bootstrap提供的accordion组件，并在jQuery的show.bs.collapse事件中添加了一个事件处理程序。该处理程序会在折叠项展开时，自动隐藏其他已展开的折叠项，以避免快速切换时的崩溃。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
4回答
引导4错误:崩溃正在转换
、、、、
有人能帮我解决一下引导4的问题吗?这是一个使错误不被忽略的错误:崩溃是过渡的，问题只是当不包括引导css时。在我的例子中，引导css与我的大型css冲突。有人能帮我摆脱这地狱吗？
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></sc
浏览 3提问于2017-02-25得票数 11
1回答
我已经将Bootstrap's collapse group items定义如下。如果我对此有很好的理解的话，这应该是collapse/expand从bootstrap的盒子里拿出来的，尽管如此，它根本不起作用。我应该在我的java脚本文件中添加一些东西吗？我遗漏了什么？
折叠组项：
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
&
浏览 11提问于2022-06-23得票数 0
5回答
最初，当点击具有文本的区域时，引导v4手风琴是可折叠的。我怎么能把它折叠到那个区域的整个区域。
这里是引导代码。
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-
浏览 8提问于2017-01-05得票数 9
回答已采纳
1回答
我用的是bootstrap 4，怎样才能在同一行中进行崩溃？
这是我的html
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudfl
浏览 8提问于2018-01-16得票数 0
回答已采纳
我正在使用创建一个逐步的过程，其中第一个手风琴中的用户有两个选项。如果选择第一个选项，第一个手风琴应该倒塌，第二个应该打开。如果选择第二个选项，则第一个选项应该崩溃，第三个选项应该打开。为此，我对按钮和collapse方法使用onclick事件。
目前正在使用引导手风琴的代码，如上面的链接所示。
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel pa
浏览 0提问于2016-03-18得票数 0
回答已采纳
1回答
自举4手风琴可按按排序
、、、
我试图使Bootstrap 4手风琴排序，所以当有人点击手风琴，该项目是移动到第一个项目。该示例直接出自引导文档：
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="ht
浏览 0提问于2018-07-14得票数 0
回答已采纳
我正在尝试定制一个用于WordPress的bootstrap下载。为了使用Modal，我已经成功地做到了这一点。我很难弄清楚我需要检查哪些方框才能获得使用accordion功能正常工作所需的一切。所以我需要莫代尔和手风琴。
我尝试过:在JavaScript组件下:组件动画(用于JS)(包括折叠)和模态
在jQuery插件>链接到组件>模态下
在jQuery插件>魔术>折叠和过渡下
现在发生的情况是，折叠的内容没有隐藏(即使div没有展开)
我尝试的代码直接取自accordion example下面的示例：
<div class="accordi
浏览 2提问于2019-05-09得票数 0
如果我在一个可折叠的引导程序页中复制两次此代码，一个切换按钮将影响其他切换，从而导致所有内容展开或折叠。
我如何解决这个问题？每个可折叠只能影响它自己的集合。
最终目标是将一个可折叠的组件作为共享组件。所以，如果我在一页中复制了3,4,5,100次，其他的不应该受到影响。(稍后将使用C#扩展方法)。
请在一页中复制两次代码。
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-mult
浏览 0提问于2019-06-26得票数 2
回答已采纳
2回答
我有一个用bootstrap 5制作的手风琴。我怎样才能使这个手风琴总是有一个展开的标签？换句话说，我不希望选项卡全部关闭在一起，我希望一个选项卡始终打开。我怎样才能用纯javascript做到这一点呢？
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h1 class="accordion-header" id="head
浏览 0提问于2021-05-19得票数 1
2回答
我正在使用Jekyll和引导-4，并尝试在手风琴视图中呈现代码，但我无法让jekyll在div中呈现减价。
我试图将markdown="1"标志添加到所有“上级”div中，但它并没有解析它。
简单的例子虽然我很想看到它发挥作用：
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
浏览 0提问于2018-01-25得票数 0
回答已采纳
2回答
我正在使用Angular 9安装的bootstrap和jquery，下面是我的package.json "bootstrap": "^4.4.1", "jquery": "^3.5.0",导入的css和js文件中的条目，如下所示 "styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"sc
浏览 27提问于2020-04-13得票数 2
回答已采纳
1回答
无板手风琴
、、、、
在没有面板的情况下，可以从Bootstrap获得"accordion“功能吗？我有一些基于他们的的代码，我有下面的代码，它使用data-parent，应该允许它工作，但是我不能让它像手风琴一样工作：
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id
浏览 2提问于2016-11-18得票数 1
回答已采纳
1回答
我想让一个元素在css(bootstrap)中溢出它的父上下文。有什么办法吗？
在我的例子中，代码如下。我希望描述字段覆盖整个行。但它在col md-4中，因此不包括在内。有没有办法做我想做的事。我的英语不好，很抱歉。
编辑：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bo
浏览 10提问于2020-05-18得票数 0
2回答
我正试图在我的角度应用程序中添加一个引导手风琴：
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link"
浏览 2提问于2019-05-03得票数 5
当我在一个页面上使用两个bootstrap3手风琴时，我得到了‘重复ID手风琴’的验证错误。
在第一行中有‘id=’，这是默认的bootstrap3 id，如果我更改它，手风琴就失去了它的属性。
默认手风琴HTML代码：
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class
浏览 2提问于2014-11-12得票数 0
回答已采纳
我的Bootstrap压缩代码是： <section class="download bg-primary text-center">
<div class="container">
<div class="row">
<div class="col-12 col-md-2">
<a href="#breaker1" class="btn btn-dark btn2" role="butto
浏览 7提问于2020-11-02得票数 0
回答已采纳
1回答
正如您可以在示例中看到的那样，引导很好，所有ID都是唯一的，但是两个不同的可折叠手风琴触发彼此。还在找解决办法。
实例：
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div id="accordion" role="tablist" aria-multiselectable="true">
浏览 6提问于2016-04-29得票数 1
回答已采纳
2回答
我正在构建一个引导手风琴，当我打开一个面板时，我想在打开时将样式应用到整个面板上，然后在关闭时将其移除。我正在使用CSS和jQuery。我在尝试这样做时遇到了一些问题；它将类添加到每个面板，它根本不适用于类等等。我必须承认，我不是jquery中最好的，但是有人能帮忙吗？谢谢
这是html：
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
浏览 5提问于2017-05-14得票数 2
回答已采纳
1回答
在引导折叠模块中显示Vines
、、、、
我试图将iFrame嵌入的藤蔓显示在的崩溃模块中。
<div class="panel-group visible-xs" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="
浏览 3提问于2014-12-18得票数 0
回答已采纳
1回答
此代码运行良好：
<!doctype html> <html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<link rel="st
浏览 2提问于2020-03-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
