展開/折疊全部帶有嵌套的手風琴和非手風琴的商品：BOOTSTRAP

Question

我剛剛接觸編程和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 VIEW-折疊除Title以外的所有內容。 單擊標題將展開/折疊文本。單擊標題和圖像視圖-展開為標題和圖像。 單擊標題將展開/折疊文本

如果有人可以幫助您解決“首次點擊問題”的最后一個環節，我將不勝感激！

謝謝。

Answer 1

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