無手風琴引導和摺疊

我有兩個錨和兩個div，我想使用摺疊功能來隱藏和顯示div的內容。它工作正常，但我有一個問題，當我點擊第一個錨點它擴大，但當我點擊第二個顯示第二個的內容，但不隱藏第一個的內容。無手風琴引導和摺疊

<div class="row mobile-options hidden-md hidden-lg"> 
<ul> 
    <li class="col-xs-4"><a href="#filtr" class="mobile-options-item" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-filter"></i></span> Filtr</a></li> 
    <li class="col-xs-4"><a href="#categories" class="mobile-options-item" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-list"></i></span> Categories</a></li> 
</ul> 
</div> 


<div id="filtr" class="collapse"> 
     Filtr content 
</div> 


<div id="categories" class="collapse"> 
     Categories content 
</div>

演示：http://www.bootply.com/IdbPEK3ROM

我不能使用.accordion或.panel因爲div的不相鄰。

我該如何讓它工作？

謝謝。

來源

2014-06-13 Odin

可能重複的[當其它打開關閉一個DIV - 自舉（http://stackoverflow.com/questions/23971819/close-one-div-when-the-other-opens-引導程序） – Nicolai

您的解決方案是否僅適用於Bootstrap 2.x？因爲我用Bootstrap 3.x試過了，它不起作用。當我將JavaScript和'data-collapse-group'添加到我的鏈接時，沒有什麼變化。我甚至改變它的按鈕，但仍然沒有運氣。 – Odin

它是爲bootstrap 3.x製作的。請檢查我的答案。 – Nicolai

我加2個附加屬性爲a標籤：指定哪些申報單必須data-target和data-collapse-group（自定義屬性摺疊）。

jsFiddle exmpale

HTML：

<div class="container"> 
    <div class="row mobile-options"> 
     <ul> 
      <li class="col-xs-2"><a href="#filtr" data-target="#filtr" class="mobile-options-item" data-collapse-group="myDivs" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-filter"></i></span> Filtr</a> 
      </li> 
      <li class="col-xs-2"><a href="#categories" data-target="#categories" class="mobile-options-item" data-collapse-group="myDivs" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-list"></i></span> Categories</a> 
      </li> 
     </ul> 
    </div> 
    <div id="filtr" class="collapse"> 
     <p>Filtr content</p> 
    </div> 
    <div id="categories" class="collapse"> 
     <p>Categories content</p> 
    </div> 
</div>

的JavaScript：

$("[data-collapse-group='myDivs']").click(function() { 
    var $this = $(this); 
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function() { 
     $($(this).data("target")).removeClass("in").addClass('collapse'); 
    }); 
});

UPDATE：

的0

$("[data-collapse-group='myDivs']").click(function (e) { 
    e.preventDefault(); 
     var $this = $(this); 
     $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function() { 
      $($(this).data("target")).removeClass("in").addClass('collapse'); 
     }); 
    });

jsFiddle

來源

2014-06-14 11:42:52 Nicolai

好的，現在它可以像我需要的那樣工作，謝謝。還有一件事，它並不重要，但它提供了更好的用戶體驗：現在，當我展開div #filtr時，視圖向上滾動到div＃filtr的開頭，所以它的工作原理就像#top等。是否有可能像手風琴一樣工作？所以div＃filtr會滑落，a標籤停留在位置，#filtr只顯示在下面？ – Odin

@Odin，檢查我答案的更新部分。 – Nicolai

這是完美的。非常感謝你！ – Odin

我不知道該怎麼做，在引導的方式，但我會做這樣

首先東西，我會隱藏所有collapse div的，然後我會告訴我需要給出一個對任何DIV單擊事件

$(function(){ 
    $('.mobile-options-item').click(function(){ 
    $('.collapse').hide(); 
    var target = $(this).attr('href'); 
    $(target).show(); 
    }); 
})

鏈接：http://www.bootply.com/pVfjihcVYE

來源

2014-06-13 13:06:21 Raghuveer

謝謝你的解決方案，但它不能100％正確工作。是的，它隱藏了一個'.mobile-options-item'並顯示第二個，但是你不能通過點擊鏈接關閉已經擴展的項目。檢查你的bootply鏈接。 – Odin

無手風琴引導和摺疊

回答

相關問題