如何让我的手风琴在所有菜单关闭的情况下加载.
How do I get my accordion to load with all the menus closed?
我正在尝试遵循这里的示例
http://twitter.github.com/bootstrap/javascript.html#collapse
我在这里放置了一个模型
http://jsfiddle.net/gqe7g/
加载行为很奇怪。 它显示菜单 1 然后折叠它,然后显示菜单 2 和菜单 3。 我希望一切都打开折叠。 我尝试了以下方法但没有成功
$('#accordion').collapse({hide: true})
从文档中:
如果您希望它默认打开,请添加其他类。
换句话说,省略"in",它将默认关闭。 http://jsfiddle.net/JBRh7/
在页面加载时关闭所有折叠的内容:
在类collapse in
中将其替换为类collapse
。
id="collapseOne" class="panel-collapse collapse **in**" role="tabpanel" aria-labelledby="headingOne">
更新到:
id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
替换
$(".collapse").collapse();
$('#accordion').collapse({hide: true})
跟:
$('#collapseOne').collapse("hide");
应该做这个伎俩。我认为第一个是默认打开的,而这一行将其关闭。
更改
class="accordion-body collapse in"
自
class="accordion-body collapse"
在你的崩溃一个DIV
如果您希望手风琴最初折叠,您可以使用预先存在的引导定义来实现,javascript 是不必要的。
将类collapsed
添加到锚点或句柄,这些锚点或句柄将成为用户打开/关闭它们的链接目标。 此外,从折叠容器中删除 in
类。
Bootstrap还提供了几个可选规范,可以通过添加data-parent=""
和data-toggle=""
来传递
-
data-parent
接受选择器,并指定作为数据父级同级的所有可折叠元素将一致切换。 -
data-toggle
接受布尔true
或false
,并对可折叠元素设置调用。
示例场景:
➤ 将加载折叠
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Details
➤ 将加载扩展
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body">
<div class="accordion-inner">
Details
➤ 将加载扩展
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Title
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
Details
在第三个示例中,无论指定了collapsed
类,折叠项都将默认为展开,因为容器上的in
类将获得更多权重。
如果你确实想通过Javascript触发手风琴,你只需要调用方法collapse()
以及针对可折叠元素的适当的id或类选择器。
collapse()
还接受可以添加到标记中的相同选项。 data-parent
和data-toggle
您缺少 Menu2 和 Menu3 的手风琴体div 上的类 'in'
您的每个手风琴体DIV都需要有class="accordion-body collapse in"
。现在,他们中的一些人只有class="accordion-body collapse"
http://jsfiddle.net/fcJJT/
您可以将选项toggle: false
传递给 collapse 语句,以便在加载时隐藏手风琴的所有元素,如下所示:
$('.collapse').collapse({
toggle: false
});
演示:http://jsfiddle.net/gqe7g/9/
用于手风琴的。 它开始完全关闭。你想要
active: false;//this does the trick
满:
<div id="accordian_div">
<h1>first</h1>
<div>
put something here
</div>
<h1>second</h1>
<div>
put something here
</div>
<h1>third</h1>
<div>
put something here
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#accordian_div").accordion({
collapsible: true,
active: false,
clearStyle: true
});
});
</script>
不熟悉 bottstrap,但这似乎比您必须处理的所有类都干净一些,并且运行顺利。
只需从"collapseOne"中的.panel-collapse
中删除.in
类。(引导程序 v3.3.7(
使用 Bootstrap 提供的 hide 方法,
$('.collapse').collapse('hide')
http://thefanciful.com 演示。我的信息在加载时被隐藏,并在按下按钮时激活。:)
使用 jQuery,这对我在页面加载时折叠所有容器都很有用
添加{active: false}
,当然必须启用collapsible
$(function () {
$("#accordion").accordion({ collapsible: true, active: false });
$(".selector").accordion();
});
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#collapseOne').collapse("hide");
});
</script>
这是一个古老的讨论,但这里有两个有效的解决方案:
1( 添加
一类aria-expanded="true"
在此链接内:
<a data-toggle="collapse" data-parent="#accordion"...></a>
2(如果您使用的是面板(如下所示(
<div id="collapse1" class="panel-collapse out collapse in" style="height: auto;">
将collapse in
更改为collapse out
也可以解决问题
这可能是一种有点笨拙的方式,但我添加了自定义 css:
.elementor-accordion-item:first-child {
display: none;
}
然后复制列表中的第一项,这样做的好处是,如果您在页面或网站上有多个手风琴,则只需执行此操作一次。
- 打开CSS菜单加载
- Extjs 选项卡菜单从 Ajax 完整内容加载
- 通过位置栏更改查询字符串,AJAX加载的菜单不会't在没有硬刷新的情况下重新填充
- 每15天为新用户加载一次放大弹出菜单
- 通过向上滑动在页面加载时隐藏子菜单
- 如何将变量中的数据加载到Jquery Mobile中的选择菜单中
- 如何访问本地json文件并在纯JavaScript和AJAX上加载包含内容的菜单
- 悬停样式应该在动态加载多级菜单时保持单击状态
- 超级菜单的JavaScript加载缓慢
- 如何加载菜单的第一个内容
- 在页面加载时关闭响应式菜单
- 使用 Ionic2 和 Angular2 Typescript 将侧边菜单加载到 DOM 中
- 如何在wordpress中根据当前页面加载不同的菜单
- 加载 Iframe src,并从水平下拉菜单中进行选择
- AJAX 从 PHP 后端加载的菜单
- 使用下拉菜单加载 iframe 的 src,然后进行更改
- 等待下拉菜单加载
- 如何检查是否启动下拉菜单加载
- Codrops多级菜单-加载html页面,而不是ajax内容,但保持动画
- jQuery Mobile弹出菜单加载相同的旧值