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>