Bootstrap:不需要的手风琴行为
Bootstrap是一种流行的前端开发框架，它提供了一系列的CSS样式和JavaScript组件，可以快速搭建响应式网站和Web应用。不需要的手风琴行为是指在使用Bootstrap进行页面开发时，可以通过简单的配置来禁用手风琴效果，即使点击展开项，其他项仍然保持展开状态。
在Bootstrap中，手风琴行为通常用于实现一种折叠效果，只展开一个选项卡或内容区域，其他选项卡或内容区域会自动折叠。然而，有时候我们可能不需要这种行为，而是希望所有选项卡或内容区域都一直保持展开状态。
要禁用手风琴行为，可以通过设置data-parent属性的值为某个选择器，或者直接将其设置为false。这样，不论点击哪个选项卡或内容区域，其他项都会保持展开状态。
下面是一个使用Bootstrap禁用手风琴行为的例子：
HTML代码：
<div class="accordion" id="myAccordion">
<div class="card">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
第一项
</button>
</h5>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="#myAccordion">
<div class="card-body">
第一项的内容
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
第二项
</button>
</h5>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#myAccordion">
<div class="card-body">
第二项的内容
</div>
</div>
</div>
</div>在上面的例子中，data-parent属性的值设置为#myAccordion，表示两个选项卡都属于同一个父级容器，并且点击一个选项卡不会影响其他选项卡的展开状态。
如果想完全禁用手风琴行为，可以将data-parent属性设置为false，如下所示：
<div class="accordion" id="myAccordion">
<div class="card">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1" aria-expanded="true" aria-controls="collapse1">
第一项
</button>
</h5>
</div>
<div id="collapse1" class="collapse show" aria-labelledby="heading1" data-parent="false">
<div class="card-body">
第一项的内容
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
第二项
</button>
</h5>
</div>
<div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="false">
<div class="card-body">
第二项的内容
</div>
</div>
</div>
</div>关于Bootstrap的更多信息和使用方法，您可以参考腾讯云的相关产品文档和示例：
相关·内容
下面的代码可以在fine....except上运行...我不想在用户单击复选框时展开或调用行。我怎么才能阻止它？(我已经插入了jquery。我想知道我是否可以用这个来解决这个问题？) <table class="table table-hover"> <td> </td> <h5><input type
浏览 9提问于2019-04-05得票数 0
回答已采纳
我很清楚ui.bootstrap还没有完全移植到引导程序3上，但是我已经用它构建了我的大部分应用程序，我不能仅仅为这个组件返回2.3。
打破了我所有的风格。不行
我要么尝试将代码包含在ui.bootstrap_0.7库下面，在ui.bootstrap 0.7代码中替换手风琴代码，然后删除它并将其完全放在另一个文件中。所有这些
浏览 1提问于2013-12-03得票数 2
回答已采纳
$parent.find('.panel').find('.in, .collapsing')
这样做的原因是，当一个手风琴打开时，所有的手风琴都不会倒塌。当使用.find而不是.children时，它们可以嵌套在.children内部(这意味着它们不需要直接比数据父级低一级)，这是我试图构建的网站的一个正式要求。我宁愿不修改bootstrap.js (或缩小的版本)，而是用在bootstrap
浏览 0提问于2016-07-03得票数 0
回答已采纳
我有这个问题:我的移动应用程序有一些基于Bootstrap的手风琴。默认行为使折叠和展开仅作用于内部链接，而不是整个标题面板。我需要改变这一点，这样当用户单击标题面板的任何部分时，手风琴都会展开和折叠。
浏览 2提问于2015-09-12得票数 0
在Bootstrap accordion中，我不需要单击a文本，而是希望在单击panel-heading div中的任意位置时将其折叠。我用的是Bootstrap 3，所以它不是手风琴，而是一个可折叠的面板。你知道怎么做整个面板可点击吗？
浏览 62提问于2013-10-08得票数 169
回答已采纳
我在用ui引导手风琴。手风琴里面有个手风琴。
在第一手风琴“类别”下，我有另一个手风琴，有三个手风琴组。默认情况下，它们是关闭的。我喜欢这样的行为:当你点击手风琴组的标题(比如“水果”)，如果所有的手风琴组都关闭了，那么它会打开所有的手风琴组.但是，如果任何组都是开放的(比如当用户单击时，“水果”、“肉”和“蔬菜”都是打开的</em
浏览 3提问于2015-08-28得票数 1
回答已采纳
1回答
我的开发人员增加了我的风格改变一个快速移动版本的网站，因为截止日期是如此紧迫。我把它建在静态的，并给他实现到CMS。有人知道怎么
浏览 7提问于2015-01-13得票数 1
回答已采纳
我的子组件是带有控件的手风琴。问题是，每次在控件上输入数据并触发将其数据传递给其父组件的onChange事件时，手风琴就会关闭/折叠，而我不需要这种行为。手风琴是从图书馆进口的，我不能改变它的行为。
是否存在防止这种情况，或将道具/数据从子组件传递到父组件而不重新复制/重新启动子组件的DOM？
浏览 4提问于2022-02-04得票数 1
2回答
我正试图在我的角度应用程序中添加一个引导手风琴： <div class="card"></div> </div>在建设之前，我运行了以下NPM安装：
npm i ngx-自助
但当我点击其中一个手风琴
浏览 2提问于2019-05-03得票数 5
1回答
我在我的应用程序中有一个bootstrap accordion，它的表现有所不同。为什么会有两种不同的行为？这个问题有什么解决方案吗？
浏览 0提问于2016-02-05得票数 0
我使用bootstrap/jquery。我有一个带有表单的模式窗口，该表单包含一个手风琴组。我想在每次打开模式时折叠手风琴组中的所有内容。each(function(){ $(this).collapse('toggle');});
它可以折叠手风琴组中的所有内容，但调用了折叠切换的每个手风琴</e
浏览 0提问于2013-03-23得票数 0
我用angular，angular-ui bootstrap和ui-sortable制作了一个可排序的手风琴，你可以拖放手风琴组。我不知道如何防止这种行为，我尝试在stop，beforeStop和update函数上使用stopPropagation()选项。没有变化(因为它引用的是由jQuery而不是Angular处理的事件，我想？！)。
有什么想法吗？提前感谢
浏览 1提问于2013-09-07得票数 2
2回答
当我单击打开所有时，只有顶部的打开。如果我继续单击Open All，它只需切换第一个和第二个可折叠元素。我在这里错过了什么？ .collapse('show');<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css&#
浏览 0提问于2018-09-20得票数 1
回答已采纳
我试图在我的rails应用程序中使用示例式手风琴指令，但是收到以下错误，我的浏览器崩溃了我的HTML视图与手风琴示例(这里的可读性缩写)相同。ng-repeat="group in groups">
{{group.c
浏览 1提问于2014-09-21得票数 2
回答已采纳
1回答
我很想为我的建筑公司网站在米兰达·七月的网站上实现类似的目标。或者这个功能很容易开发？
非常感谢这里的一些建议，干杯，艾瑞克。
浏览 0提问于2019-03-13得票数 0
回答已采纳
我正在尝试使用VueJS与Bootstrap 5的。我在其中一个手风琴项目上添加了v-for指令，它“排序”works....but样式有点偏离。例如，所有手风琴项目在开始时都显示为“活动”。而且，在开始的时候，第一个手风琴应该打开而不是关闭。我如何正确地使用
浏览 1提问于2021-07-19得票数 0
回答已采纳
3回答
我试着用手风琴做一个页面，用UI-Bootstrap。我发现这个对我来说很好。所以我在我的项目中复制了代码，但它不起作用，显然.
为了获得更快的，我在柱塞中制作了这个片段。
浏览 8提问于2015-10-15得票数 2
回答已采纳
我在上看到了一些非常奇怪的行为。我正在构建一个手风琴控件(希望最终是对成员引导的一个很好的贡献)，所以我构建了一个视图类，它使用layout包装视图的内容：});
然后，我像这样使用{{#view}}助手，并包括一个{{#each}}块，它最终将包括其他视图来设置手风琴<
浏览 2提问于2013-03-04得票数 1
回答已采纳
我在我的网站上到处使用Twitter Bootstrap手风琴。它们工作得很好，我刚刚注意到的问题是，如果我想打印一页上面有一页。理想情况下，如果要为我的目的打印页面，它们都应该展开。有谁知道最好的方法吗？我知道我可以通过javascript将一些东西连接到页面上的打印按钮上，但假设用户将使用浏览器的打印按钮-所以将javascript绑定到这个按钮可能不是一个选择。
浏览 0提问于2013-01-11得票数 6
我在我的项目中使用了bootstrap accordion (折叠)，但不幸的是结果并不是想要的结果。我在手风琴中有大约8个项目，其中一些里面有很多文本(有时超过半页)。我正在尝试折叠/展开accordion中的项目，但这种行为完全是奇怪和不可预测的。我只是在他们的网站上复制了这个例子，并添加了更多的项目。我的期望是，每次我点击一个关闭的项目，它就会打开，打开的<
浏览 2提问于2013-02-17得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
