JQuery切換點擊效果（demo：bootstrap折疊模塊切換至可同時展開）

前幾天在用BootStrap的時候用到了其中的一個“折疊”模塊，就是這個

快寫（抄）完的時候突然發現一個問題，如果閱讀者希望能夠同時展開所有折疊框？如果一會又想切回來每次只一個？

先來看一下用比較呆的方法做的（jQuery）

<div>
        <h3>標題一</h3>
        <p>展示文本一</p>
    </div>
    <div>
        <h3>標題二</h3>
        <p>展示文本二</p>
    </div>
    <div>
        <h3>標題三</h3>
        <p>展示文本三</p>
    </div>
    <button id="toggleShowing" data-show="all">同時展示多個框體</button>

 

<script> $(function(){ //siblings()不能跨div了？
        function showOne() { $(this).next("p").slideToggle("fast").parent().siblings().find("p").slideUp("fast"); }; function showAll() { $(this).next("p").slideToggle("fast"); }; $("h3").bind("click",showOne); $("#toggleShowing").click(function () { if($(this).data("show") == "all"){ $("h3").unbind("click",showOne); $("h3").bind("click",showAll); $(this).data("show","one"); console.log($(this).data("show")); }else{ $("h3").unbind("click",showAll); $("h3").bind("click",showOne); $(this).data("show","all"); } }) }) </script>

(ps:使用sibling()方法的時候很詭異的發現不能跨div了？也就是說只能兄弟不能堂哥堂弟了？明天再專門研究一哈)

 

 

這個方法有些呆，但是能正確的實現效果

 

試一下用BS本身自帶的鈎子能不能（直接在菜鳥教程上修改）：

 網址：https://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html

注意：在在線編輯器中把下圖中的in去掉，這個會使得該折疊默認開啟，影響后續判斷

下面開始“控制變量法”摸索：

這個時候的js代碼是空的，此時就是每次只能展開一個的折疊模塊

 

這個時候的js塊是空的，四個自閉的折疊框，每次只能顯示一個。

 

當為第四個折疊框添加這一行代碼：

可以看到在別的元素被打開時，第四部分也能夠被打開。但第四元素先被打開后再開啟別的元素，第四部分會被隱藏。

以下這幾個寫法同理：

 

 

 

注意：#collapseOne這個是一開始原本默認展開的元素，使用這個方法也可以讓他閉合。

同樣的，如第二個，一開始默認閉合的也可以在js中使其展開。（可能有別的什么用吧）

 

而只要是設置了這些屬性：

的折疊模塊，在后打開的情況下，就不會觸發默認的閉合效果。

知道了這個后用JQ/JS寫起來就很簡單了~