Bootstrap 4 Accordion仅首个元素可用问题求助

Hey, I’ve dealt with this exact problem before—your issue boils down to incompatible jQuery and Bootstrap 4 versions.

Bootstrap 4.0.0-beta.3 requires jQuery 3.1.1 or higher, but you’re using jQuery 2.1.1. The old jQuery version clashes with Bootstrap’s collapse component event handling, causing the second/third items to fold right back up after clicking.

Here’s how to fix it: #

• Replace your jQuery script tag with a version that meets Bootstrap 4’s requirements. For example:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  

• Keep your Bootstrap CSS and JS versions matched (beta.3 is fine if you want to stick with it, just make sure jQuery is up to snuff).

Working Full Code: #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
        Collapsible Group Item #3
      </a>
    </div>
    <div id="collapseThree" class="collapse">
      <div class="card-body">
        Lorem ipsum..
      </div>
    </div>
  </div>
</div>

Quick Checks If You Still Have Issues: #

• Make sure no custom JavaScript is overriding or interfering with Bootstrap’s collapse event handlers.
• Double-check that your data-parent attribute value (#accordion) exactly matches the ID of your accordion container (your current code is correct here).

内容的提问来源于stack exchange，提问作者Sharifur Robin