展开/折叠全部带有嵌套的手风琴和非手风琴的商品：BOOTSTRAP [英] Expand/Collapse All with a nested accordion and non-accordion item: BOOTSTRAP

问题描述

我大约2个月才开始编程和Twitter Bootstrap，所以请客气！

I'm about 2 months new to programming and Twitter Bootstrap, so please be kind!

我已经做了很多挖掘和搜索工作，但是不确定我使用的是正确的术语，所以我想直接问一下。

I've done a lot of digging and searching, but am not sure I am using the correct terms so I figure I'd ask directly.

我正在尝试创建一个全部展开/折叠按钮，以展开或折叠标题标题下的所有项目。标题标题下的项目包括文本和图像。我希望能够通过单击标题标题来展开/折叠文本。我希望能够通过单击按钮来扩展/折叠文本和图像。

I am trying to create an Expand/Collapse all button that will expand or collapse all items under a Title Header. The items under a title header include a text piece and an image. I want to be able to expand/collapse the text piece by clicking on the Title Header. I want to be able to expand/collapse the text AND the image by clicking on the button.

问题是：我想通过按钮来扩展/折叠所有内容，而不管文本是展开还是折叠。

The problem is: I want to button to expand/collapse everything regardless if the text piece is expanded or collapsed.

这是jsfiddle： http://jsfiddle.net/mcfly303/XXXYn/1/

This is the jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/1/

如您所见，该按钮将在与当前状态相反的位置打开或关闭项目。有没有一种方法可以进行通用展开/折叠，而不管嵌套项目是展开还是折叠？

As you can see, the button will toggle items open or closed opposite of their current state. Is there a way to do a "universal" expand/collapse, regardless if the nested items are expanded or collapsed?

基本上我想使用全部切换按钮仅产生a）标题或b）标题和图像。

Basically I'd like the "toggle all" button to result only in a) the title or b) the title and the image.

在此先感谢您的帮助！！！

Thanks in advance for any help!!!!

我的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：

my javascript:

$('.expandcollapse').click(function () {

    $('.collapse').each(function (index) {
        $(this).collapse("toggle");
    });
});

编辑：所以我部分弄清楚了。 jsfiddle： http://jsfiddle.net/mcfly303/XXXYn/4/
我将按钮拆分为两个单独的按钮，以清晰地标记我要实现的每个功能。即在加载时，标题视图按钮上的第一次单击将切换文本打开和图片关闭。同样在加载时，第一次单击标题和图像按钮将使文本切换为打开状态并使图像保持打开状态。

So I partially figured it out. jsfiddle: http://jsfiddle.net/mcfly303/XXXYn/4/ I split to button into two separate buttons to clearly label each function I want to achieve.However, there is still a kink. Namely on loading, the FIRST CLICK on the Title View button will toggle the text open and the picture closed. And also on load, the first click on the Title and Image button will toggle the text open and keep the image open.

第一次单击后，一切正常，这要澄清（并在上面编辑我的错误陈述）：
单击标题视图-折叠除标题外的所有标题。单击标题将展开/折叠文本
单击标题和图像视图-展开为标题和图像。单击标题将展开/折叠文本

After the first click, everything works fine, which to clarify (and edit my misstatement above) is: Click on TITLE VIEW - collapses all except the Title. Click on the Title will expand/collapse the text piece Click on TITLE AND IMAGE VIEW - expands to Title and Image. Click on the Title will expand/collapse the text piece

如果有人可以帮助解决首次单击问题的最后一个纽扣，我将不胜感激！

If anyone can please help with this last kink of the "first click problem" I would really appreciate it!

谢谢。

推荐答案

更新后的JS：

var isCollapsed = false;
$('.expandcollapse').click(function () {
  var collapseCommand = isCollapsed ? "show" : "hide";

  $('.collapse').each(function () {  
    $(this).collapse(collapseCommand);
  });

  isCollapsed = !isCollapsed;
});

我还在类中将添加到 #collapseOne ，以便页面最初正确显示。

I also added the in class to #collapseOne so the page displays correctly initially.

编辑：

基于您的修改的新代码：

New code based on your edit:

$('.titleView').click(function () {
  $('#collapseOne, #collapseMain').collapse('hide');
});

$('.fullStubView').click(function () {
  $('#collapseOne, #collapseMain').collapse('show');
});

除非我丢失了某些东西，否则似乎可以解决问题。 jsFiddle

Unless I'm missing something, seems like this solves the problem. jsFiddle

这篇关于展开/折叠全部带有嵌套的手风琴和非手风琴的商品：BOOTSTRAP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！