侧边栏下拉菜单冲突：无法同时打开多个下拉菜单求助

Hey there! Let's get those dropdown menus working so you can have multiple open at the same time. The usual culprit here is that your JavaScript is probably closing all dropdowns whenever you trigger a new one—let's fix that with a simple, independent state approach.

First, let's break down the issue #

Most basic dropdown scripts loop through all dropdowns and hide them before showing the current one. That's why only one stays open. We need to make each dropdown's state independent, so toggling one doesn't affect the others.

Here's a complete working example you can adapt: #

HTML (structure matching your navigation needs)

<nav class="navbar">
  <div class="dropdown">
    <button class="dropbtn">Math Revision</button>
    <div class="dropdown-content">
      <a href="#">Algebra</a>
      <a href="#">Calculus</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">Science Revision</button>
    <div class="dropdown-content">
      <a href="#">Biology</a>
      <a href="#">Chemistry</a>
    </div>
  </div>
</nav>

CSS (style with a toggleable visibility class)

.navbar {
  background-color: #2c3e50;
  overflow: hidden;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ecf0f1;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #2c3e50;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #bdc3c7;
}

/* This class controls when the dropdown is visible */
.dropdown.active .dropdown-content {
  display: block;
}

JavaScript (toggle only the current dropdown)

// Grab all dropdown containers
const dropdownContainers = document.querySelectorAll('.dropdown');

dropdownContainers.forEach(container => {
  const button = container.querySelector('.dropbtn');
  
  button.addEventListener('click', () => {
    // Only toggle the active class on THIS dropdown, not all of them
    container.classList.toggle('active');
  });
});

How to adapt this to your existing code: #

1. Audit your current JS: If you have code that loops through all .dropdown-content elements and sets display: none when a button is clicked, delete that part—it's what's closing other dropdowns.
2. Add the active class logic: Replace direct display style manipulation with the CSS class approach, toggling the class only on the dropdown associated with the clicked button.
3. Align your HTML structure: Make sure each dropdown button is wrapped inside a container (like the .dropdown div in the example) so you can target the correct content element relative to the button.

This approach keeps each dropdown's state completely independent, so you can open as many as you want at once.

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