0

我在最近幾個小時裏很難弄清楚我的錯誤。我使用bootstrap手風琴和把手模板引擎 - 它和我的DB值一起工作。twitter bootstrap手風琴缺陷

問題是,當你第一次加載頁面的所有標籤都打開..他們都關閉時,我關閉並重新打開其中之一。這裏是頁面代碼:

<div class="panel-group" style="margin: 1%" id="accordion" role="tablist" aria-multiselectable="true"> 
    {{# each questions }} 
    <div class="panel panel-primary"> 
    <div class="panel-heading" role="tab" id="{{@index}}"> 
     <h4 class="panel-title"> 
     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{ this.id }}" aria-expanded="true" aria-controls="{{ this.id }}"> 
      {{ this.syntax }} 
     </a> 
     </h4> 
    </div> 
    <div id="{{ this.id }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="{{@index}}"> 
     <div class="panel-body"> 
     {{ this.answer }}   
     </div> 
    </div> 
    </div> 
    {{/each}} 
</div> 

我所以這裏使用車把的佈局:

<!doctype html> 
<html lang='en'> 
<head> 
    <meta charset = 'UTF-8'> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="/client/css/Site.css"> 
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <script src="/client/js/site.js"></script> 
</head> 
<body> 
    <ul class="topnav"> 
     <li><a class="active" href="/">NANO-DEV</a><li> 
     <li><a href="/questions">Questions</a></li> 
     <li class="right"><a href="#about">About</a></li> 
    </ul> 
    {{{ body }}} 
</body> 
</html> 

我想這堆case所以我說這個代碼到我的js文件,但它不會幫助下..

$(function() { 
    var transition = false; 
    var $active = true; 

    $('.panel-title > a').click(function(e) { 
    e.preventDefault(); 
    }); 

    $('#accordion').on('show.bs.collapse',function(){ 
    if($active){ 
     $('#accordion .in').collapse('hide'); 
    } 
    }); 

    $('#accordion').on('hidden.bs.collapse',function(){ 
    if(transition){ 
     transition = false; 
     $('.panel-collapse').collapse('show'); 
    } 
    }); 
}); 

回答

0

嘗試在html中根據您的元素添加.collapse類。 你也不需要處理顯示和隱藏事件。

+0

?我嘗試了所有的面板,只有身體和兩個都沒有幫助只會讓事情變得更糟 – GevAlter

+1

nvm,我認爲你要改變崩潰在崩潰,它的工作..謝謝你! – GevAlter

0

面臨同樣的問題 - 所有部分都打開.collapse調用。 +另一個有趣的bug(下)。

但是找到了解決方案。

我有正確的HTML標記(它工作正常),首先沒有JS。但後來我想以編程方式切換部分。當我在某些部分調用.collapse('show')時,其他部分顯示爲不同步(有些部分保持打開狀態),即使是手動點擊也是如此。這裏的技巧是使用.collapse()調用強制初始化插件。所以避免所有部分擴大(並使其可控編程,沒有任何問題),你必須提供兩個選項這樣的:

$acc.find('.collapse').collapse({ 
    parent: $acc, // to make it work as accordion 
    toggle: false // don't toggle while initialising 
}); 

檢查片段的更多細節。

我希望它幫上什麼樣的元素有人

$(function(){ 
 
\t var tabIndex = 0; 
 

 
\t var $acc = $('#accordion'); 
 
\t const tabsCount = $acc.find('.collapse').length; 
 

 
\t // IF SKIP JS INITIALISATION - SHOW METHOD WILL NOT CLOSE OTHER TABS (UNLESS THEY'RE ALREADY INITIALIZED WITH MANUAL CLICKS) 
 
\t $acc.find('.collapse').collapse({ 
 
\t \t parent: $acc, // to make it work as accordion 
 
\t \t toggle: false // don't toggle while initializing 
 
\t }); 
 

 
\t $('#openNextTabBtn').on('click', function(){ 
 
\t \t $acc.find('.collapse').eq(++tabIndex % tabsCount).collapse('show'); 
 
\t }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div> 
 
    <span class="btn btn-default" id="openNextTabBtn">Open Next Tab</span> 
 
</div> 
 

 
<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 in" 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 class="panel panel-default"> 
 
     <div class="panel-heading" role="tab" id="headingThree"> 
 
      <h4 class="panel-title"> 
 
       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
        Collapsible Group Item #3 
 
       </a> 
 
      </h4> 
 
     </div> 
 
     <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
      <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>