求助：Bootstrap 4 Collapse折叠手风琴无法正常工作

Hey there! Let's walk through the most common reasons your accordion might not be working—since you've struggled with this feature before, we'll cover all key checks to get it up and running.

1. Make Sure You're Loading Dependencies in the Right Order #

Bootstrap 4's collapse component relies on jQuery and Popper.js to function. If these aren't loaded, or loaded in the wrong sequence, the accordion won't work as expected. Here's the correct order to include them in your HTML:

<!-- Load jQuery first -->
<script src="jquery.min.js"></script>
<!-- Then Popper.js -->
<script src="popper.min.js"></script>
<!-- Finally Bootstrap's JavaScript -->
<script src="bootstrap.min.js"></script>

Double-check that your file paths are correct too—broken links will prevent the scripts from loading entirely.

2. Verify Your HTML Structure Matches Bootstrap's Requirements #

The accordion needs a specific nested structure for data-parent to work properly. Your parent container (with ID companies) should wrap all your .card elements, and each collapsible panel must have the data-parent="#companies" attribute. Here's a correct example structure:

<div id="companies" class="accordion" role="tablist">
  <!-- First Card & Collapsible Panel -->
  <div class="card">
    <div class="card-header" role="tab">
      <h5 class="mb-0">
        <button class="btn btn-link" 
                data-toggle="collapse" 
                data-target="#collapseCompany1" 
                aria-expanded="true" 
                aria-controls="collapseCompany1">
          Company 1
        </button>
      </h5>
    </div>
    <div id="collapseCompany1" 
         class="collapse show" 
         role="tabpanel" 
         aria-labelledby="headingCompany1" 
         data-parent="#companies">
      <div class="card-body">
        Details about Company 1 go here.
      </div>
    </div>
  </div>

  <!-- Second Card & Collapsible Panel -->
  <div class="card">
    <div class="card-header" role="tab">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" 
                data-toggle="collapse" 
                data-target="#collapseCompany2" 
                aria-expanded="false" 
                aria-controls="collapseCompany2">
          Company 2
        </button>
      </h5>
    </div>
    <div id="collapseCompany2" 
         class="collapse" 
         role="tabpanel" 
         aria-labelledby="headingCompany2" 
         data-parent="#companies">
      <div class="card-body">
        Details about Company 2 go here.
      </div>
    </div>
  </div>
</div>

Key checks here:

• Each button's data-target exactly matches the ID of its corresponding .collapse panel (no typos!).
• Every .collapse element has the data-parent="#companies" attribute.
• The parent container (#companies) wraps all the .card elements directly.

3. Ensure All IDs Are Unique #

If any ID on your page is duplicated (for example, two elements using collapseCompany1), Bootstrap's JavaScript won't be able to target the correct panel. Do a quick search of your code to make sure all IDs are one-of-a-kind.

4. Check for JavaScript Conflicts #

If you're using other JavaScript libraries (like Prototype, Zepto, or custom scripts) alongside Bootstrap, they might conflict with jQuery. Try temporarily commenting out other scripts to see if the accordion starts working. If it does, you'll need to resolve the conflict (for example, using jQuery's noConflict() method).

5. Look for Errors in the Browser Console #

Open your browser's developer tools (press F12) and go to the Console tab. Any errors here (like $ is not defined or Cannot read property 'collapse' of undefined) will tell you exactly what's broken. For example:

• $ is not defined means jQuery isn't loaded correctly.
• Errors referencing Bootstrap components mean the Bootstrap JS file isn't loading properly.

If you've tried all these steps and still can't get it working, sharing a snippet of your actual code will help narrow down the issue even further!

内容的提问来源于stack exchange，提问作者adrian wix torres