一鍵打開兩個可摺疊面板是在兩個分開的手風琴（面板-集團）

我有兩個分離的手風琴（引導3）。我只想單擊一次即可在兩個手風琴中打開相同的可摺疊面板。我用兩個可摺疊面板的「ID」試了一下，但是當我點擊 - 只有第一個手風琴的面板打開。一鍵打開兩個可摺疊面板是在兩個分開的手風琴（面板-集團）

<div class="panel-group" id="accordion"> 
<div class="panel"> 
    <div class="panel-heading" data-toggle="collapse" href="#collapseOne"> // 1* i want when i click this 2* 
    </div> 
</div> 
</div> 
<div class="panel-group" id="accordion"> 
<div class="panel"> 
    <div class="panel-heading" data-toggle="collapse" href="#collapseOne"> // 2* this to be open too 
    </div> 
</div> 
</div>

所以，我可以實現與（如果它當然可能）修改的「href」屬性或者我需要寫一些JQuery的與onclick事件做這樣的事情addClass的元素與類摺疊？

來源

2015-10-06 Ceylan Mumun Kocabaş

我找到了解決方案，從現有的answer - 拉斐爾塞羅塔說：

「你可以手動切換手風琴與 $('#myAccordion').collapse('toggle')」

。所以，我寫我的劇本是這樣的：

$('.panel-heading').click(function(){ 

    var href = $(this).attr('href'); 

    if($(href + "Dyn").hasClass("in")){ 
      $(href + "Dyn").collapse("toggle"); 
     }else{ 
      $(href + "Dyn").collapse("toggle"); 
     } 
});

這個作品就像我以前的解決方案，但保持了動畫的運行。

來源

2015-10-08 12:30:14

您可以使用Bootstraps.collapse('toggle')來達致這。看例子。

$('.panel-default').on('click', function() { 
 
    $('.panel-collapse').collapse('toggle'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingOne"> 
 
     <h4 class="panel-title"> 
 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
      Collapsible Group Item #1 
 
     </a> 
 
     </h4> 
 

 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
 
     <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put 
 
     a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
 
     raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" role="tab" id="headingTwo"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
      Collapsible Group Item #2 
 
     </a> 
 
     </h4> 
 

 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
     <div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put 
 
     a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, 
 
     raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-06 13:50:15 vanburen

我說的是兩個獨立的手風琴，而當我點擊手風琴ONE的3號面板，從手風琴兩個在同一時間被打開3號面板，你的答案是很好，但沒有解決我的problem.Anyway罐你這麼多:) –

我找到了解決方案（但是這一個不適合我的需要）這樣 - 對的「href」 similiar的ID屬性和accesing他們這樣說：

$('.panel-heading').click(function(){ 
     var href = $(this).attr('href'); 
     if($(href + "Dyn").hasClass("in")){ 
      $(href + "Dyn").removeClass("in"); 
     }else{ 
      $(href + "Dyn").addClass("in"); 
     } 
    });

有了這個方法，你失去的第二合攏動畫！重要

來源

2015-10-07 15:25:14

一鍵打開兩個可摺疊面板是在兩個分開的手風琴（面板-集團）

回答

相關問題