引導：手風琴在開始

Question

不collpased我使用下面的代碼有手風琴，問題是，它不是在開始崩潰了，請你幫我怎麼會被摺疊，直到點擊

我得到代碼codepen

<script> 
    $(document).ready(function() { 

     $(".toggle-accordion").on("click", function() { 
      var accordionId = $(this).attr("accordion-id"), 
      numPanelOpen = $(accordionId + ' .collapse.in').length; 
      $(this).toggleClass("active"); 

     }) 
    }); 
</script> 


<style> 
    .panel-body{ 
     padding:10px; 
     font-size:15px; 
    } 
    input[type="checkbox"] { 
     margin-right: 12px !important; 
    } 
    .col-sm-4{ 
     margin-bottom:40px; 
    } 
    .leftindent{ 
     margin-left:30px; 
    } 
    .panel-default>.panel-heading { 
     color: #333; 
     background-color: #fff; 
     border-color: #e4e5e7; 
     padding: 0; 
     -webkit-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    } 

    .panel-default>.panel-heading a { 
     display: block; 
     padding: 10px 15px; 
    } 

    .panel-default>.panel-heading a:after { 
     content: ""; 
     position: relative; 
     top: 1px; 
     display: inline-block; 
     font-family: 'Glyphicons Halflings'; 
     font-style: normal; 
     font-weight: 400; 
     line-height: 1; 
     -webkit-font-smoothing: antialiased; 
     -moz-osx-font-smoothing: grayscale; 
     float: right; 
     transition: transform .25s linear; 
     -webkit-transition: -webkit-transform .25s linear; 
    } 

    .panel-default>.panel-heading a[aria-expanded="true"] { 
     background-color: #eee; 
    } 

    .panel-default>.panel-heading a[aria-expanded="true"]:after { 
     content: "\2212"; 
     -webkit-transform: rotate(180deg); 
     transform: rotate(180deg); 
    } 

    .panel-default>.panel-heading a[aria-expanded="false"]:after { 
     content: "\002b"; 
     -webkit-transform: rotate(90deg); 
     transform: rotate(90deg); 
    } 

    .accordion-option { 
     width: 100%; 
     float: left; 
     clear: both; 
     margin: 15px 0; 
    } 

    .accordion-option .title { 
     font-size: 20px; 
     font-weight: bold; 
     float: left; 
     padding: 0; 
     margin: 0; 
    } 

    .accordion-option .toggle-accordion { 
     float: right; 
     font-size: 16px; 
     color: #6a6c6f; 
    } 

    .accordion-option .toggle-accordion:before { 
     content: "Expand All"; 
    } 

    .accordion-option .toggle-accordion.active:before { 
     content: "Collapse All"; 
    } 

</style> 

以下是html代碼。

<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="#cookiesandbiscotti" aria-expanded="true" aria-controls="collapseOne"> 
              4 Cookies &amp; Biscotti 
             </a> 
            </h4> 
           </div> 
    <div id="cookiesandbiscotti" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
     <?php foreach($mincookines as $value):?> 
      <div class="form-group"><input type="checkbox"><?= $value;?></div> 
     <?php endforeach;?> 
    </div> 
    </div> 
    </div> 
    </div> 

Answer 1

我有適合您的解決方案。您需要從class="panel-collapse collapse in"中刪除in類，以便它可以處於正常狀態。並使aria-expanded="true"到false。它會爲你工作。在這裏你可以看到更新codepen

代碼

<div class="container"> 
    <div class="accordion-option"> 
    <h3 class="title">Lorem Ipsum</h3> 
    <a href="javascript:void(0)" class="toggle-accordion active" accordion-id="#accordion"></a> 
    </div> 
    <div class="clearfix"></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="false" 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 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> 
</div> 

Answer 2

請刪除in類形式DIV ID cookiesandbiscotti。 「在」

Answer 3

刪除類，或者如果你想要的第一個項目是開放

Answer 4

從class="panel-collapse collapse in"取出in類，你是好去添加過多的第一個項目。