展开/折叠所有嵌套的手风琴和非手风琴项目:BOOTSTRAP

Expand/Collapse All with a nested accordion and non-accordion item: BOOTSTRAP

本文关键字：手风琴 BOOTSTRAP 项目 折叠 嵌套 展开      更新时间：2023-09-26

我刚学编程和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/我将按钮分成两个单独的按钮，以便清楚地标记我想要实现的每个功能。然而，还是有一个问题。即在加载时，第一次点击标题视图按钮将切换文本打开和图片关闭。同样，在加载时，第一次点击标题和图像按钮将切换文本打开并保持图像打开。

第一次点击后，一切正常，澄清(并修改我上面的错误陈述)是:点击标题视图-折叠除标题以外的所有内容。点击标题将展开/折叠文本块点击标题和图像视图-展开到标题和图像。点击Title将展开/折叠文本

如果有人可以帮助解决这最后一种"首次点击问题"，我将非常感激!

谢谢。

更新后的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

相关文章：