我的 bootstrap 手风琴没有按预期展开和收缩

Question

我正在尝试向此网页添加 bootstrap 手风琴，但我不确定为什么这些按钮不起作用。

我的代码：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="accordion" id="myAccordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">HTML5</button>
      </h2>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#myAccordion">
      <div class="card-body">
        HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and latest major version of HTML that is a World Wide Web Consortium (W3C) recommendation.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">CSS3</button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#myAccordion">
      <div class="card-body">
        CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2. 1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns,
        flexible box or grid layouts.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">Responsive Design</button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" data-parent="#myAccordion">
      <div class="card-body">
        Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. ... In responsive design, page elements reshuffle
        as the viewport grows or shrinks.
      </div>
    </div>
  </div>
</div>

Answer 1

添加bootstrap4和js文件使用

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>

<body>
  <div class="accordion" id="myAccordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne">HTML5</button>
        </h2>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="#myAccordion">
        <div class="card-body">
          HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and latest major version of HTML that is a World Wide Web Consortium (W3C) recommendation.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo">CSS3</button>
        </h2>
      </div>
      <div id="collapseTwo" class="collapse" data-parent="#myAccordion">
        <div class="card-body">
          CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2. 1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns,
          flexible box or grid layouts.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h2 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree">Responsive Design</button>
        </h2>
      </div>
      <div id="collapseThree" class="collapse" data-parent="#myAccordion">
        <div class="card-body">
          Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. ... In responsive design, page elements reshuffle
          as the viewport grows or shrinks.
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

</html>

我的 bootstrap 手风琴没有按预期展开和收缩

My bootstrap accordion does not expand and contract as expected

html

bootstrap-accordion