手風琴CSS之前和使用

Question

後我已經寫代碼的手風琴，總5塊板（將被示出僅1這裏）

問題是，在頁面加載時，面板標題按鈕被自動突出顯示作爲綠色。當我點擊它們時，它會順利打開該部分，並且可以讀取和關閉所有細節。但只有當我這樣做了一次後，我的按鈕才能恢復正常（面板標題的背景爲灰色，在+號上顯示綠色）。爲什麼當頁面加載時它不是這樣呢？

fiddle with code

<div class="container"> 
<div class="row"> 
    <div class="col-lg-12"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <!--panel 1--> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
      <a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapse"> 
      Committee 1 Details 
      </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia lacinia mauris, at ultricies leo ornare nec. Vivamus eu est vel felis dignissim tempor. Nulla facilisi. Duis molestie tortor ac tempor volutpat. Phasellus nec mi aliquet, sollicitudin 
      neque eget, consectetur libero. Vestibulum sollicitudin sapien libero, egestas tempus eros scelerisque eu. 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

#accordion .panel-title a:after, #accordion .panel-title a.collapsed:after { 
content: "\f068"; 
font-family: FontAwesome; 
font-size: 15px; 
color: #fff; 
width: 45px; 
height: 100%; 
line-height: 54px; 
text-align: center; 
position: absolute; 
top: 0px; 
left: -1px; 
background: #3DC9B3; 
transition: all .2s; 
} 
#accordion .panel-title a.collapsed:after { 
content: "\f067"; 
color: #959595; 
background: #f4f4f4; 
transition: all 0.5s ease 0s; 
} 

Answer 1

「正常」 CSS你所描述的是基於斷類.collapsed的。該課程僅適用於摺疊手風琴項目之後。要在頁面加載時以最初的方式顯示，請將.collapsed類添加到元素的HTML中。

<div class="container"> 
<div class="row"> 
    <div class="col-lg-12"> 
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <!--panel 1--> 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapse"> 
      Committee 1 Details 
      </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia lacinia mauris, at ultricies leo ornare nec. Vivamus eu est vel felis dignissim tempor. Nulla facilisi. Duis molestie tortor ac tempor volutpat. Phasellus nec mi aliquet, sollicitudin 
      neque eget, consectetur libero. Vestibulum sollicitudin sapien libero, egestas tempus eros scelerisque eu. 
     </div> 
     </div> 
    </div> 

    </div> 
</div> 

https://jsfiddle.net/eenbdhkz/5/