Bootstrap下拉菜单与模态框无法同时正常工作问题求助

Hey there, let's break down exactly what's causing your dropdown and modal to clash—this is a super common issue when Bootstrap's JavaScript gets loaded multiple times, and I'll walk you through fixing it step by step.

1. The Core Problem: Duplicate Bootstrap JS Loads #

Looking at your setup, Bootstrap's JavaScript is being loaded three separate times, which is why only one component works at a time:

• Sprockets: In app/assets/javascripts/application.js you have //= bootstrap-sprockets
• Webpacker: In app/javascript/packs/application.js you're importing bootstrap
• CDN: Directly in views/layouts/application.html.erb you've added the Bootstrap CDN script

When Bootstrap JS loads multiple times, it overwrites or messes up event listeners (like click handlers for dropdowns/modals), so whichever load takes precedence will "break" the other component.

2. Fix It: Choose One Loading Method #

Pick one way to load Bootstrap JS and remove the other two. Here are the two recommended approaches:

Option A: Use Webpacker (Modern Rails Approach) #

This is the preferred method for Rails 5+ setups using Webpacker:

1. Delete the CDN script block from application.html.erb:

   <!-- Remove this entire section -->
   <!-- script that changes everything -->
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   <!-- end of script that changes everything -->
   

2. Remove the Bootstrap sprockets line from app/assets/javascripts/application.js:

   // Delete this line
   //= bootstrap-sprockets
   

3. Double-check your app/javascript/packs/application.js has the correct import order (jQuery first, then Popper, then Bootstrap):

   import "jquery";
   import "popper.js";
   import "bootstrap";
   import {} from 'jquery-ujs'
   

4. Your package.json already has the right dependencies, so no changes needed there.

Option B: Stick with Sprockets (Legacy Approach) #

If you prefer using sprockets over Webpacker:

1. Delete the CDN script block from application.html.erb (same as above)
2. Remove the Bootstrap import from app/javascript/packs/application.js:

   // Delete this line
   import "bootstrap";
   

3. Ensure your app/assets/javascripts/application.js follows the correct load order:

   // = require jquery
   //= require popper
   //= require bootstrap-sprockets
   //= require cocoon
   //= require flatpickr
   //= require_tree .
   

4. Your Gemfile already includes the necessary gems (jquery-rails, popper_js, bootstrap), so no changes needed here.

3. Add Turbolinks Compatibility (If Enabled) #

Since you have jquery-turbolinks in your Gemfile, add this snippet to your main JS file (either application.js for sprockets or packs/application.js for Webpacker) to ensure Bootstrap components reinitialize correctly when Turbolinks loads a new page:

document.addEventListener('turbolinks:load', function() {
  // Re-bind Bootstrap components
  $('.dropdown-toggle').dropdown();
  $('.modal').modal({});
});

4. Test the Fix #

Restart your Rails server, then test both components:

• Click the dropdown in your navbar—it should expand without issues
• Click "New store" to trigger the modal—it should open as expected

Why This Happened #

Bootstrap's JavaScript relies on attaching event listeners to elements like .dropdown-toggle and .modal. When you load Bootstrap JS multiple times, these listeners get overwritten or duplicated, leading to unpredictable behavior where only one component works.

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