动态创建的Bootstrap下拉菜单无法正常关闭问题求助

Hey there! Let's work through this dropdown collapse problem—it’s a super common gotcha with dynamic dropdowns, so I’ll walk you through the most likely fixes based on what you’ve shared.

First, let’s break down why your dropdown might not be collapsing:

• You’re probably only handling the "expand" state (adding a class or showing content) without toggling it back off
• Event binding might be broken because your dropdown is dynamically created (so direct event listeners won’t stick)
• External click handling might be missing, or event bubbling is messing with your logic

Here’s a complete, fixed implementation that addresses all these issues—using your existing #outer container:

Step 1: Full Working Code #

First, the HTML (you already have this):

<div id="outer"></div>

Then the JavaScript (with fixes for dynamic elements and state toggling):

// Create your dynamic dropdown structure (expanded from your snippet)
var container = $('<div>').addClass('dropdown').appendTo($('#outer'));
var toggleBtn = $('<button>').addClass('dropdown-toggle').text('Open Dropdown').appendTo(container);
var dropdownContent = $('<div>').addClass('dropdown-content').html('<p>Your dropdown content here</p>').appendTo(container);

// Use event delegation for the toggle button (critical for dynamic elements!)
$('#outer').on('click', '.dropdown-toggle', function(e) {
  // Stop event bubbling so the document click doesn't immediately close it
  e.stopPropagation();
  // Toggle the "open" state instead of just adding it
  container.toggleClass('is-open');
});

// Handle clicks outside the dropdown to close it
$(document).on('click', function(e) {
  // Check if the click is NOT inside the dropdown container
  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.removeClass('is-open');
  }
});

Add this CSS to make the show/hide behavior work:

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #eee;
  padding: 1rem;
  min-width: 150px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Show content when the "is-open" class is present */
.dropdown.is-open .dropdown-content {
  display: block;
}

Key Fixes Explained #

• Event Delegation: Since your dropdown is created dynamically with $('<div>'), direct click listeners won’t work. Using $('#outer').on('click', '.dropdown-toggle', ...) ensures the event is caught even for elements added later.
• Toggle State: Instead of just adding an "open" class, toggleClass switches between adding and removing it—this lets the same button both open and close the dropdown.
• External Click Handling: The document-level click listener checks if the click happened outside the dropdown. We use e.stopPropagation() on the toggle button to prevent the document click from firing immediately after opening (which would close it right away).

If your original code had other logic, you can merge these fixes into it—just make sure you’re toggling the state correctly and using delegation for dynamic elements.

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