Javascript 使用嵌套的手风琴和非手风琴项展开/折叠全部:引导
我大约2个月不熟悉编程和推特引导,所以请善待我 我已经做了很多挖掘和搜索,但我不确定我使用的是正确的术语,所以我想我会直接问 我正在尝试创建一个展开/折叠所有按钮,该按钮将展开或折叠标题标题下的所有项目。标题标题下的项目包括文本和图像。我希望能够通过单击标题标题展开/折叠文本块。我希望能够通过单击按钮展开/折叠文本和图像 问题是:无论文本块是展开还是折叠,我都希望使用按钮展开/折叠所有内容 这是JSFIDLE: 如您所见,该按钮将切换与当前状态相反的打开或关闭项目。是否有一种方法可以执行“通用”展开/折叠,而不管嵌套项是展开还是折叠 基本上,我希望“全部切换”按钮只产生a)标题或b)标题和图像 提前感谢您的帮助 我的html:Javascript 使用嵌套的手风琴和非手风琴项展开/折叠全部:引导,javascript,twitter-bootstrap,expand,collapse,Javascript,Twitter Bootstrap,Expand,Collapse,我大约2个月不熟悉编程和推特引导,所以请善待我 我已经做了很多挖掘和搜索,但我不确定我使用的是正确的术语,所以我想我会直接问 我正在尝试创建一个展开/折叠所有按钮,该按钮将展开或折叠标题标题下的所有项目。标题标题下的项目包括文本和图像。我希望能够通过单击标题标题展开/折叠文本块。我希望能够通过单击按钮展开/折叠文本和图像 问题是:无论文本块是展开还是折叠,我都希望使用按钮展开/折叠所有内容 这是JSFIDLE: 如您所见,该按钮将切换与当前状态相反的打开或关闭项目。是否有一种方法可以执行“通用”
<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>
编辑:所以我部分地弄明白了。jsfiddle:
我将to按钮分为两个单独的按钮,以清楚地标记我想要实现的每个功能。但是,仍然存在一个纠结。即在加载时,第一次单击标题视图按钮将切换文本打开和图片关闭。而且在加载时,第一次单击标题和图像按钮将切换文本打开并保持图像打开
第一次单击后,一切正常,需要澄清(并编辑我的上述错误陈述)的是:
单击标题视图-折叠除标题外的所有内容。单击标题将展开/折叠文本块
单击标题和图像视图-展开为标题和图像。单击标题将展开/折叠文本块
如果有人能帮我解决“第一次点击问题”的最后一个难题,我将非常感激
谢谢。更新的JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
我还将类中的添加到了#collapseOne
中,这样页面最初就可以正确显示
编辑:
基于编辑的新代码:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
除非我遗漏了什么,这似乎解决了问题 更新的JS:
var isCollapsed = false;
$('.expandcollapse').click(function () {
var collapseCommand = isCollapsed ? "show" : "hide";
$('.collapse').each(function () {
$(this).collapse(collapseCommand);
});
isCollapsed = !isCollapsed;
});
我还将
类中的添加到了#collapseOne
中,这样页面最初就可以正确显示
编辑:
基于编辑的新代码:
$('.titleView').click(function () {
$('#collapseOne, #collapseMain').collapse('hide');
});
$('.fullStubView').click(function () {
$('#collapseOne, #collapseMain').collapse('show');
});
除非我遗漏了什么,这似乎解决了问题 谢谢你的回复,但它只是部分按照我想要的方式工作。您的代码发生的情况是,我单击一次toggle all按钮,文本块将打开,图像将关闭。再次单击并打开,再次单击并关闭。jsfiddle或您的代码在此处:。我所寻找的实际上是点击“全部切换”,要么全部关闭,要么只打开图像。对不起,我意识到我原来的问题不是很清楚!但我想我已经明白了…因为我遇到了另一个难题,所以在下面发布了。@user2102726-根据您的评论编辑了我的答案。再次感谢您的回复!这几乎正是我想要的,但是有没有办法让“标题和图片视图”上的行为单击show COOL HAND LUKE and the image,并且仍然让PAUL NEWMAN MOVIES文本被折叠(但单击COOL HAND LUKE标题时可以查看)也只有我一个人,我看到在第一次单击“标题和图像视图“随后的点击效果很好。谢谢你的回复,但它只是部分按照我想要的方式工作。”。您的代码发生的情况是,我单击一次toggle all按钮,文本块将打开,图像将关闭。再次单击并打开,再次单击并关闭。jsfiddle或您的代码在此处:。我所寻找的实际上是点击“全部切换”,要么全部关闭,要么只打开图像。对不起,我意识到我原来的问题不是很清楚!但我想我已经明白了…因为我遇到了另一个难题,所以在下面发布了。@user2102726-根据您的评论编辑了我的答案。再次感谢您的回复!这几乎正是我想要的,但是有没有办法让“标题和图片视图”上的行为单击show COOL HAND LUKE and the image,并且仍然让PAUL NEWMAN MOVIES文本被折叠(但单击COOL HAND LUKE标题时可以查看)也只有我一个人,我看到在第一次单击“标题和图像视图”以及随后的单击都可以正常工作。