基于data属性的多Dropdown Toggle故障：仅首个菜单响应求助

Hey there! Let's break down why only your first dropdown works when clicked, while the second one doesn't do anything—this is a super common pitfall, so we'll get to the bottom of it.

1. You're Using Duplicate IDs (The #1 Culprit) #

HTML requires all id attributes to be unique on a page. If you have two dropdowns with the same id (like id="dropdown"), the browser will only ever find the first matching element. So when your second button tries to trigger the dropdown, it's either targeting the first one or failing entirely.

Fix Example:

Instead of repeating IDs, use unique IDs paired with data-* attributes to link buttons to their dropdowns, or rely on classes:

<!-- Button 1 -->
<button class="dropdown-btn" data-dropdown="dropdown-1">Toggle Dropdown 1</button>
<div id="dropdown-1" class="dropdown-content">...</div>

<!-- Button 2 -->
<button class="dropdown-btn" data-dropdown="dropdown-2">Toggle Dropdown 2</button>
<div id="dropdown-2" class="dropdown-content">...</div>

<script>
// Bind click events to all buttons
document.querySelectorAll('.dropdown-btn').forEach(button => {
  button.addEventListener('click', () => {
    const dropdownId = button.dataset.dropdown;
    const dropdown = document.getElementById(dropdownId);
    dropdown.classList.toggle('active'); // Toggle your show/hide class
  });
});
</script>

2. Your Event Binding Only Targets the First Element #

If you used document.querySelector('.dropdown-btn') to select your button, this method only returns the first matching element in the DOM. That means your click event is only attached to the first button, leaving the second one unbound.

Fix:

Use document.querySelectorAll() instead, then loop through each element to attach the event (just like the example above).

3. Mismatched HTML/CSS Structure #

Double-check that both dropdowns have identical HTML structure and CSS classes. If the second dropdown uses a different class name for its hidden state (e.g., hidden vs hide), or its parent structure is different, the show/hide logic won't apply to it.

4. Scoped Variables Pointing to the First Dropdown #

If you stored your dropdown in a variable like const dropdown = document.getElementById('dropdown'), that variable only references the first dropdown. When your second button tries to use this variable, it's still modifying the first one instead of the second.

Fix:

Avoid hardcoding element selections in variables. Instead, dynamically select the correct dropdown when the button is clicked—you can use data-* attributes (as shown earlier) or traverse the DOM directly, like button.nextElementSibling if the dropdown sits right after the button.

If you can share your actual code snippet, we can pinpoint the exact issue, but these are the most common reasons for this behavior.

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