- 首页
- 其他开发
- bootstrap 3 collapse('hide') 打开所有可折叠的?
bootstrap 3 collapse('hide') 打开所有可折叠的?
[英] bootstrap 3 collapse('hide') opens all collapsibles?
本文介绍了bootstrap 3 collapse('hide') 打开所有可折叠的?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试实现一些相当简单的东西，但无法理解 - Google 没有提供任何帮助，Bootstrap 文档似乎有点混乱.
我需要什么:
- 简单的折叠式手风琴，页面加载时所有折叠式都处于关闭状态
- 只需单击一下按钮即可关闭所有可折叠组件.
问题:
- 我的解决方案仅在用户打开/关闭一个或多个可折叠组件时有效
- 当我调用
collapse('hide') 时，所有可折叠对象都被打开，除非它们之前已经被手动打开过.
参见 Jsfiddle.
我的标记:
<a class="btn btn-default" id="collapseall"><span class="icon"></span>全部收起！</a><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">可折叠组项目 #1</a>
<div id="collapseOne" class="panel-collapse collapse"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单源咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，它们是可持续的 VHS.
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">可折叠组项目 #2</a>
<div id="collapseTwo" class="panel-collapse collapse"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单源咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，它们是可持续的 VHS.
<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">可折叠组项目 #3</a>
<div id="collapseThree" class="panel-collapse collapse"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.3 wolf Moon offcia aute, non cupidatat 滑板 dolor 早午餐.食品卡车藜麦 nesciunt labourum eiusmod.早午餐 3 狼月亮 tempor，sunt aliqua 放一只鸟，鱿鱼单源咖啡 nulla 假设 shoreditch 等.Nihil anim keffiyeh helvetica，精酿啤酒，wes anderson cred nesciunt sapiente ea proident.Ad vegan excepteur 屠夫副 lomo.紧身裤 occaecat 精酿啤酒从农场到餐桌，原始牛仔布美学合成器你可能没有听说过它们，它们是可持续的 VHS.
Javascript:
$('#collapseall').click(function () {$('.panel-collapse').collapse('隐藏');返回假；});
我在这里遗漏了什么?
解决方案
我认为你只需要像这样隐藏打开的..
$('#collapseall').click(function(){$('.panel-collapse.in').collapse('隐藏');});
这是一个有效的打开/关闭所有示例:http://bootply.com/123636
I'm trying to achieve something rather simple, but can't get my head around it - Google hasn't been any help, and Bootstrap docs seem to be a bit confusing.
What I need:
- simple collapsible accordion, with all collapsibles in closed state on page load
- all collapsibles can be closed with one click on a button.
The problem:
- my solution only works when the user has opened/closed one or more collapsibles
- when I call
collapse('hide'), all collapsibles are opened, unless they had already been opened manually before.
See Jsfiddle.
My markup:
<a class="btn btn-default" id="collapseall"><span class="icon"></span>Collapse 'm all!</a>
<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. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</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. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</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. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
The Javascript:
$('#collapseall').click(function () {
$('.panel-collapse').collapse('hide');
return false;
});
What am I missing here?
解决方案
I think you have to only hide the open ones like this..
$('#collapseall').click(function(){
$('.panel-collapse.in')
.collapse('hide');
});
Here is a working open/close all example: http://bootply.com/123636
这篇关于bootstrap 3 collapse('hide') 打开所有可折叠的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
