當其他div擴展bootstrap時，Div不會崩潰

Question

我已經嘗試過以前在同類問題上發布的所有答案。 基本上我希望這兩個按鈕在一行中，並且其中只有一個應該一次折疊。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div id="accordion"> <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a> <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a> <div class="accordion-group"> <div class="collapse" id="sample1"> <h1> here comes the sample1</h1> </div> <div class="collapse" id="sample2"> <h1> here comes the sample2</h1> </div> </div> </div> 

Answer 1

你為什么不看這個:)

$(document).ready(function(){
$(".b1").click(()=>{
$("#menu2").hide();
$("#menu1").show();
 });
  $(".b2").click(()=>{
$("#menu2").show();
$("#menu1").hide();
})

}）;

https://jsbin.com/tikajukexe/edit?html,js,output

Answer 2

Bootstrap v3如何實現手風琴在某種程度上是一個黑盒子（除非你真的深入研究幕后JS的邏輯）。 但是，根據一些測試，這是我所理解的：

1. 控件可以任意嵌套
2. accordion元素必須由帶有.panel類的<div> .panel
3. 包裝div必須是：
   • 彼此的兄弟姐妹和
   • data-parent屬性中指定的元素的直接后代（例如，在您的示例中為#accordion ），沒有任何其他嵌套

考慮到這一點，您可以對原始DOM進行一些更改：

1. 將#accordion ID移動到面板的包裝器
2. 控件可以放在頁面的任何位置 ，只要data-toggle="collapse" and data-parent =“＃accordion`”被聲明;）

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <!-- Controls can be arbitrarily nested, no problem As a proof-of-concept, I have nested them three <div>s deep :) --> <div><div><div> <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a> <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a> </div></div></div> <div id="accordion" class="accordion-group"> <!-- Panel elements must be direct child of data-parent (#accordion) --> <div class="panel"> <div class="collapse" id="sample1"> <h1> here comes the sample1</h1> </div> </div> <div class="panel"> <div class="collapse" id="sample2"> <h1> here comes the sample2</h1> </div> </div> </div> 

Answer 3

您無法使用默認的bootstrap折疊執行此操作。 你可以做的是添加一個新的jquery動作，如下所示：

    $(document).on("click", "a[href='#sample1']", function() {
        if ($("#sample2").is(":visible")) {
            $("a[href='#sample2']").trigger("click");
        }
    });
    $(document).on("click", "a[href='#sample2']", function() {
        if ($("#sample1").is(":visible")) {
            $("a[href='#sample1']").trigger("click");
        }
    });

這樣做的是，當你點擊另一個時它可見，它會觸發另一個的折疊以隱藏它。

Answer 4

好吧，我會告訴你一個通用的方法來使用JQ

 $(document).ready(function(){ function DataBindMenu(container){ var menuButtons = $(container).find("a[type='button']"); menuButtons.click(function(){ $(container).find(".collapse").hide("slow"); // collapse all; // now lets view the right sample var sampleId = $(this).attr("aria-controls"); $("#" + sampleId).show("slow"); }); } DataBindMenu("#accordion"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div id="accordion"> <a type="button" class="btn btn-danger" href="#sample1" data-toggle="collapse" aria-controls="sample1" data-parent="#accordion">Sample 1</a> <a type="button" class="btn btn-danger" href="#sample2" data-toggle="collapse" aria-controls="sample2" data-parent="#accordion">Sample 2</a> <div class="accordion-group"> <div class="collapse" id="sample1"> <h1> here comes the sample1</h1> </div> <div class="collapse" id="sample2"> <h1> here comes the sample2</h1> </div> </div> </div> 

希望這能幫到你，我從不喜歡使用bootstrap