我刚刚接触编程和 Twitter Bootstrap 大约 2 个月,所以请多多关照!
我已经进行了大量的挖掘和搜索,但不确定我使用的术语是否正确,所以我想我会直接询问。
我正在尝试创建一个展开/折叠全部按钮,该按钮将展开或折叠标题标题下的所有项目。标题标题下的项目包括文本片段和图像。我希望能够通过单击标题标题来展开/折叠文本片段。我希望能够通过单击按钮来展开/折叠文本和图像。
问题是:我想要按钮来展开/折叠所有内容,无论文本片段是展开还是折叠。
这是jsfiddle:http://jsfiddle.net/mcfly303/XXXYn/1/
如您所见,该按钮将在与当前状态相反的状态下打开或关闭项目。有没有办法执行“通用”展开/折叠,无论嵌套项目是展开还是折叠?
基本上,我希望“切换全部”按钮只产生 a) 标题或 b) 标题和图像。
提前感谢您的帮助!!!!
我的html:
<div class="well sidebar-nav" id="sidebar">
<ul class="nav nav-list">
<li><a href="#" class="expandcollapse">Toggle All</a>
</li>
</ul>
</div>
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="row-fluid">
<div class="span9">
<div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<h2>COOL HAND LUKE</h2>
</a>
</div>
</div>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
<div class="mainList"> <a href="#">Paul Newman Movies</a> <a href="#"> <i class="icon-white icon-th-list"></i></a>
</div>
</div>
</div>
</div>
</div>
<div id="collapseMain" class="accordion-body collapse in">
<div class="accordion-inner">
<div class="row-fluid">
<div class="span12">
<img src="http://www.samefacts.com/wp-content/uploads/2012/12/CoolHandLuke_135Pyxurz.jpg" alt="">
</div>
</div>
</div>
</div>
我的 JavaScript:
$('.expandcollapse').click(function () {
$('.collapse').each(function (index) {
$(this).collapse("toggle");
});
});
编辑:所以我部分地弄清楚了。 jsfiddle:http://jsfiddle.net/mcfly303/XXXYn/4/ 我将按钮分成两个单独的按钮,以清楚地标记我想要实现的每个功能。但是,仍然存在一个问题。即加载时,第一次单击“标题 View ”按钮将打开文本并关闭图片。而且在加载时,第一次单击“标题和图像”按钮将打开文本并保持图像打开。
第一次点击后,一切正常,需要澄清(并编辑上面的错误陈述)的是: 单击标题 View - 折叠除标题之外的所有内容。单击标题将展开/折叠文本片段 单击标题和 ImageView - 展开为标题和图像。单击标题将展开/折叠文本片段
如果有人可以帮助解决“首次点击问题”的最后一个问题,我将非常感激!
谢谢。
最佳答案
更新了 JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
我还将 in
类添加到 #collapseOne
中,以便页面最初显示正确。
编辑:
基于您的编辑的新代码:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
除非我遗漏了一些东西,否则这似乎可以解决问题。 jsFiddle
关于javascript - 展开/折叠全部包含嵌套的 Accordion 和非 Accordion 项目 : BOOTSTRAP,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16205662/