Question

我在使用Bootstrap手风琴时遇到问题。
加载页面时，默认情况下折叠手风琴，这与我想要的相反。
我希望它们默认情况下会合拢，然后单击后便会扩展。
下面的HTML代码：

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>bootstrap accordion</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'><link rel="stylesheet" href="./style3.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Tomorrow&display=swap" rel="stylesheet"> 
</head>
<body>
<!-- partial:index.partial.html -->
<section class="container">
  <div id="accordion" class="accordion-container">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button id="radio" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
          aaaa
          </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
         <p id="forward">aaaabooooody</p>
        </div>
      </div>
    </div>

      </div>

       <div id="accordion" class="accordion-container">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button id="radio" class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          bbbbbbb
          </button>
        </h5>
      </div>

      <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
         <p id="forward">bbbbbbbbblaankkkk</p>
        </div>
      </div>
    </div>

      </div>



</section>
<!-- partial -->



  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
</body>
</html>


//////CSS CODE BELOW

.accordion-container .card .card-header button.btn:after {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.accordion-container .card .card-header {
  position: relative;
  background-color: #00d2ff;
}
.accordion-container .card .card-header .btn-link {
  color: #FFF;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  /*font-weight: 600;*/
  line-height: 23px;
}
.accordion-container .card .card-header button.btn.collapsed:after {
  background-image: url();
}
.accordion-container .card .card-header button.btn:not(.collapsed):after {
  background-image: url();
}
.accordion-container .card .card-header button.btn.btn-link {
  width: 100%;
  text-align: left;
}
.accordion-container .card .card-header button.btn:after {
  content: '';
  background-repeat: no-repeat;
  background-position: 50%;
  width: 3rem;
  height: 3rem;
  text-align: center;
  float: right;
  padding: .7rem;
  border: 1px solid #ffff;
  border-radius: 50%;
}
.accordion-container .card .card-header button.btn.collapsed:after {
  background-color: rgba(255, 255, 255, 0.31);
}
.accordion-container .card .card-header button.btn:not(.collapsed):after {
  background-color: white;
}
.accordion-container .card .card-header button.btn-link:not(.collapsed)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  opacity: .31;
}
.accordion-container .card .card-body {
  color: white;
  background-color:  #FFF;
  color: #000000;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 19px;
}

这是加载时的预期行为：
但这是我在加载页面时得到的：

Answer 1

将class="collapse show"更改为class="collapse"。然后按您的期望工作。

您也可以检查一下 aria-expanded html attribute

咏叹调扩展等于错误不起作用

1 个答案: