HTML Accordion 第一个不能自动关闭 CSS Bootstrap



我只是想做一个手风琴。但是我的第一个标签总是自动打开。甚至在我把班改到坍塌之后!

我不知道怎么了。

这里只是一些随机的单词,让stack overflow相信我的帖子不全是代码。我真的需要帮助,在我的文件中的一个小功能,如果有人掌握html引导的东西,请让我知道。 代码:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-group" id="accordion">
  <div class="panel panel-default" id="panel1">
    <div class="panel-heading">
      <h4 class="panel-title">
      <a class="collapsed" data-target="#collapseOne" data-toggle="collapse" href="#collapseOne" data-parent="#accordion">What We Offer</a>
        <i class="indicator glyphicon glyphicon-chevron-right  pull-right"></i>
        <i class="indicator glyphicon glyphicon-chevron-right  pull-left"></i>
      </h4>
    </div>
    <div class="panel-collapse collapse in" id="collapseOne">
      <div class="panel-body">
        <p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim
          convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque.
        </p>
        <p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper.
          Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At
          quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci
          et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam.
        </p>
      </div>
    </div>
  </div>
  <div class="panel panel-default" id="panel2">
    <div class="panel-heading">
      <h4 class="panel-title"><a class="collapsed" data-target="#collapseTwo" data-toggle="collapse" href="#collapseTwo" data-parent="#accordion">Testimonials</a>
        <i class="indicator glyphicon glyphicon-chevron-right  pull-right"></i>
        <i class="indicator glyphicon glyphicon-chevron-right  pull-left"></i>
       </h4>
    </div>
    <div class="panel-collapse collapse" id="collapseTwo">
      <div class="panel-body">
        <p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum
          est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac.
          Eget bibendum suscipit viverra in mauris, cras turpis.
        </p>
        <p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat,
          est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent
          phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper
          dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis
          augue ipsum.
        </p>
      </div>
    </div>
  </div>
</div>
<!-- Post Info -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

中删除in
<div class="panel-collapse collapse in" id="collapseOne">

查看:jsfiddle

最新更新