我 正在 使用 Bootstrap 3 并 尝试 设置 以下 折叠 结构 :
- Onload : 组 中 的 每个 折叠 面板 完全 折叠 , 并 按 记录/预期 运行 。
1.按钮 点击 :每个 折叠 面板 都会 展开 , 单击 切换 不会 产生 任何 效果 ( 包括 URL 锚 点 效果 ) 。
1.另 一 个 按钮 点击 :所有 面板 恢复 加载 状态 ;都 像 平常 一样 折叠 并 可 点击 。
我 已经 完成 了 第 2 步 , 但是 当 我 在 第 3 步 再次 点击 按钮 时 , 它 没有 任何 效果 。 我 也 没有 在 Chrome 开发 工具 中 看到 控制 台 错误 报告 , 或者 通过 我 的 本地 JSHint 运行 代码 。
我 希望 每次 单击 按钮 时 都 能 重复 此 循环 。
我 在 这里 设置 了 代码 http://bootply.com/98140 , 在 这里 设置 了 代码 http://jsfiddle.net/A9vCx/
我 很 想 知道 我 做 错 了 什么 , 我 很 感激 你 的 建议 。 谢谢 !
我 的 HTML :
<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
</div>
中 的 每 一 个
我 的 JS :
$(function() {
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('.collapse-init').on('click', function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$('.panel-title > a').removeAttr('data-toggle');
$(this).html('Click to enable accordion behavior');
}
});
});
格式
4条答案
按热度按时间rqmkfv5c1#
更新的答案
尝试打开一个折叠控件的多个面板,该折叠控件设置为可折叠控件,即设置了
data-parent
属性,这可能会带来相当大的问题和缺陷(请参阅multiple panels open after programmatically opening a panel上的此问题)相反,最好的方法是:
1.允许每个面板单独切换
1.然后,在适当的位置手动强制执行折叠行为。
若要允许每个面板单独切换,请在
data-toggle="collapse"
元素上,将data-target
属性设置为.collapse
面板ID选择器(而不是将data-parent
属性设置为父控件)。您可以在问题Modify Twitter Bootstrap collapse plugin to keep accordions open中了解有关此问题的更多信息。每个面板大致如下所示:
若要手动强制执行折叠行为,您可以为collapse show事件创建一个处理程序,该事件在显示任何面板之前发生。使用该处理程序可以确保在显示所选面板之前关闭任何其他打开的面板(请参阅此answer to multiple panels open)。您还希望代码仅在面板处于活动状态时执行。若要执行所有这些操作,请添加以下代码:
然后使用
show
和hide
切换每个面板的可见性,使用data-toggle
启用和禁用控件。Working demo in jsFiddle的名字
envsm3lx2#
不管 出于 什么 原因 ,
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
似乎 只 在 第 一 次 工作 , 而且 它 只 在 展开 可 折叠 的 时候 工作 。 ( 我 试 着 从 展开 的 可 折叠 的 开始 , 它 不会 折叠 。 )它 可能 只是 在 你 第 一 次 用 这些 参数 初始 化 collapse 时 运行 一 次 的 东西 。
使用
show
和hide
方法 会 更 幸运 。以下 是 一 个 示例 :
中 的 每 一 个
http://bootply.com/98201 的 最 大 值
当然 , 凯尔 米特 似乎 比 我 更 能 处理 这个 问题 。 我 对 他 的 回答 和 理解 印象 深刻 。
我 不 明白 发生 了 什么 , 也 不 明白 为什么
show
在 某些 地方 似乎 在 切换 。但 折腾 了 一 段 时间 后 .. 终于 来 了 以下 解决 方案 :
格式
http://bootply.com/98239 格式
j5fpnvbx3#
要在同时使用“hide”和“show”函数(如
.collapse( 'hide' )
)时保持折叠特性不变,必须在调用“hide”或“show”之前,使用toggle: false
在对象中设置的父属性初始化可折叠面板zsohkypk4#
最好的和经过测试的解决方案是把下面的小片段,这将折叠折叠标签,这是已经打开时,你加载。在我的情况下,最后第六个标签是打开的,所以我使它折叠页面加载。