html - 使用前后的 Accordion CSS

Question

我已经为 Accordion 编写了代码，共有 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 类。该类仅在折叠 Accordion 元素后应用。要让它在页面加载时以这种方式显示，请将 .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/