如何实现下拉菜单的交互行为？

Hey there! Let's fix up your dropdown menu to work properly. Your current code only hides the #subtwo element when clicking #header, but a functional dropdown should toggle between showing and hiding the submenu, plus handle common user interactions like clicking outside to close. Here's how to implement it step by step:

Step 1: Fix the Toggle Behavior #

First, let's adjust your JavaScript to toggle the submenu instead of just hiding it. We'll check the current display state and switch between block (visible) and none (hidden):

function init() {
  const header = document.getElementById("header");
  const submenu = document.getElementById('subtwo');

  header.onclick = function(e) {
    // Stop the click from bubbling up (critical for later outside-click logic)
    e.stopPropagation();
    // Toggle visibility based on current state
    submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
  };
}

window.onload = init;

Update your CSS to hide the submenu by default and add basic styling to make it look like a dropdown:

#subtwo {
  display: none; /* Hide by default */
  background: white;
  padding: 0.75em;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#header {
  background: #f5f5f5;
  padding: 0.75em;
  cursor: pointer; /* Indicate it's clickable */
}

Step 2: Add Click-Outside-to-Close Functionality #

A polished dropdown should close when the user clicks anywhere else on the page. Let's add that logic:

function init() {
  const header = document.getElementById("header");
  const submenu = document.getElementById('subtwo');

  // Toggle dropdown on header click
  header.onclick = function(e) {
    e.stopPropagation();
    submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
  };

  // Close dropdown when clicking outside the menu
  document.addEventListener('click', function() {
    submenu.style.display = 'none';
  });
}

window.onload = init;

Step 3: Improve Accessibility (Optional but Highly Recommended) #

For better usability, add keyboard support and accessibility attributes so screen readers can understand the dropdown state:

function init() {
  const header = document.getElementById("header");
  const submenu = document.getElementById('subtwo');

  // Reusable toggle function
  const toggleDropdown = () => {
    const isVisible = submenu.style.display === 'block';
    submenu.style.display = isVisible ? 'none' : 'block';
    // Update aria attribute for screen readers
    header.setAttribute('aria-expanded', !isVisible);
  };

  // Click handler
  header.addEventListener('click', toggleDropdown);

  // Keyboard support: Enter/Space to toggle, Esc to close
  header.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      toggleDropdown();
    } else if (e.key === 'Escape') {
      submenu.style.display = 'none';
      header.setAttribute('aria-expanded', 'false');
    }
  });

  // Click outside to close (ignore clicks inside header/submenu)
  document.addEventListener('click', function(e) {
    if (!header.contains(e.target) && !submenu.contains(e.target)) {
      submenu.style.display = 'none';
      header.setAttribute('aria-expanded', 'false');
    }
  });

  // Initialize accessibility attributes
  header.setAttribute('aria-expanded', 'false');
  header.setAttribute('aria-haspopup', 'true');
  header.tabIndex = 0; // Make header focusable via keyboard
}

window.onload = init;

Add focus styling to the header for keyboard users:

#header:focus {
  outline: 2px solid crimson;
  outline-offset: 2px;
}

Key Improvements Explained: #

• Toggle Logic: Instead of one-way hiding, we check the current display state to switch between visible and hidden.
• Event Propagation: e.stopPropagation() prevents the header click from triggering the outside-click handler immediately.
• Accessibility: aria attributes and keyboard support ensure the dropdown works for all users, including those with disabilities.

This will give you a fully functional, user-friendly dropdown menu!

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