我大约2个月新的编程和Twitter的引导程序,所以请善良!
我已经做了大量的挖掘和搜索,但不确定我使用的是正确的术语,所以我想我会直接问。
我正在尝试创建“全部展开/折叠”按钮,该按钮将展开或折叠标题页眉下的所有项目。标题页眉下的项目包括文本片段和图像。我希望能够通过单击标题页眉展开/折叠文本片段。我希望能够通过单击按钮展开/折叠文本和图像。
问题是:我想按钮来展开/折叠所有内容,无论文本片段是展开还是折叠。
这是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/我把to按钮分成两个独立的按钮,以便清楚地标记我想实现的每个功能。但是,仍然有一个问题。即在加载时,第一次单击标题视图按钮将切换文本打开和图片关闭。同样在加载时,第一次单击标题和图片按钮将切换文本打开和图片保持打开。
在第一次点击之后,一切都很好,需要澄清的是(并编辑我上面的错误陈述):单击标题视图-折叠除标题外的所有内容。单击标题将展开/折叠文本部分。单击标题和图像视图-展开至标题和图像。单击标题将展开/折叠文本部分。
如果有人可以请帮助这最后一个扭结的“第一次点击问题”,我真的会很感激!
- 谢谢-谢谢
1条答案
按热度按时间bz4sfanl1#
更新的JS:
我还向
#collapseOne
添加了in
类,以便页面最初能够正确显示。编辑:
基于您的编辑的新代码:
除非我遗漏了什么,否则看起来这解决了问题。jsFiddle