CSS响应式下拉子菜单问题求助：Dashboard子菜单无法隐藏

Hey there! I totally get the frustration when a dropdown won't behave like it should—let's get that Dashboard submenu sorted out for you. The main issue right now is that we haven't added logic to toggle the submenu's visibility, especially when interacting with other parts of the navbar. Here's how to fix it step by step:

1. Update the CSS for Submenu Behavior #

First, let's adjust the CSS to handle the submenu's default state, hover behavior (for desktop), and responsive styling:

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: relative; /* Add this to contain absolute-positioned submenus */
}

/* Float the list items side by side */
ul.topnav li {float: left; position: relative;} /* Add position relative for submenu positioning */

/* Style the links inside the list items */
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #111;}

/* Style the submenu */
ul.topnav li ul.hidden {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
  display: none; /* Hide by default */
  min-width: 180px;
}

ul.topnav li ul.hidden li {
  float: none;
}

ul.topnav li ul.hidden li a {
  text-align: left;
  padding: 12px 16px;
}

/* Show submenu on desktop hover */
ul.topnav li:hover ul.hidden {
  display: block;
}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  /* Adjust submenu for mobile */
  ul.topnav li ul.hidden {
    position: static;
    background-color: #555;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: block; /* Changed from inline to block for better stacking */
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

2. Add JavaScript to Toggle Submenu and Handle Navigation #

Now we need to add a function to toggle the submenu when clicking Dashboard, and make sure it hides when we interact with other parts of the navbar:

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
  const topnav = document.getElementsByClassName("topnav")[0];
  topnav.classList.toggle("responsive");
  // Hide submenu when toggling responsive nav
  const submenu = document.querySelector(".topnav li ul.hidden");
  submenu.style.display = "none";
}

// Toggle Dashboard submenu
function toggleSubmenu() {
  const submenu = this.nextElementSibling;
  // Close other submenus if any (in case you add more later)
  const allSubmenus = document.querySelectorAll(".topnav li ul.hidden");
  allSubmenus.forEach(menu => {
    if (menu !== submenu) {
      menu.style.display = "none";
    }
  });
  // Toggle current submenu
  submenu.style.display = submenu.style.display === "block" ? "none" : "block";
}

// Hide submenu when clicking other links
function hideSubmenuOnNav() {
  const submenu = document.querySelector(".topnav li ul.hidden");
  submenu.style.display = "none";
  // Also close responsive nav if open
  const topnav = document.getElementsByClassName("topnav")[0];
  if (topnav.classList.contains("responsive")) {
    topnav.classList.remove("responsive");
  }
}

// Add event listeners
document.addEventListener("DOMContentLoaded", function() {
  const dashboardLink = document.querySelector('.topnav li a[href="#dashboard"]');
  dashboardLink.addEventListener('click', toggleSubmenu);
  
  // Add click event to all other nav links to hide submenu
  const navLinks = document.querySelectorAll('.topnav li a:not([href="#dashboard"])');
  navLinks.forEach(link => {
    link.addEventListener('click', hideSubmenuOnNav);
  });
});

3. Update the HTML to Work with the New Logic #

We don't need to change much here, just make sure the submenu has the hidden class (which we're using in our CSS/JS):

<ul class="topnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li>
    <a href="#dashboard">Dashboard</a>
    <ul class="hidden">
      <li><a href="#">Profile</a></li>
      <li><a href="#">Change Password</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">☰</a>
  </li>
</ul>

How This Works #

• Desktop: Hover over Dashboard to see the submenu, and it'll hide when you move away.
• Mobile: Click Dashboard to toggle the submenu open/close. Click any other link or the hamburger icon, and the submenu will hide (plus the responsive nav will collapse if it was open).

Give this a try—it should fix that persistent dropdown issue you were facing!

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