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/

使用前后的Accordion CSS

1 个答案: