点击<details>标签内按钮后保持其展开状态的实现方法

Got it, let's fix this up for you! The issue right now is that your closeAll() function is shutting down all <details> elements when you click a button—including the one that button lives in. We just need to tweak the logic to skip the current menu, so it stays open to show users where their action came from.

Here's the step-by-step solution: #

First, we'll modify your closeAll() function to accept an "excluded element" parameter, then add a button click handler that identifies the parent menu and tells closeAll() to leave it open.

1. Updated HTML Structure

Add a consistent class to your <details> elements (like collapsible-menu) so we can target them easily, and pass the button itself to the click handler:

<details class="collapsible-menu">
  <summary>User Settings</summary>
  <button onclick="handleMenuButtonClick(this)">Update Profile</button>
  <button onclick="handleMenuButtonClick(this)">Change Password</button>
</details>

<details class="collapsible-menu">
  <summary>Content Actions</summary>
  <button onclick="handleMenuButtonClick(this)">Create Post</button>
  <button onclick="handleMenuButtonClick(this)">Delete Draft</button>
</details>

<details class="collapsible-menu">
  <summary>Admin Tools</summary>
  <button onclick="handleMenuButtonClick(this)">Ban User</button>
  <button onclick="handleMenuButtonClick(this)">Clear Cache</button>
</details>

2. Modified JavaScript Logic

We'll update closeAll() to skip the current menu, and add a handler to manage button clicks:

// Modified closeAll function: accepts an element to exclude from closing
function closeAll(excludeMenu) {
  const allMenus = document.querySelectorAll('.collapsible-menu');
  
  allMenus.forEach(menu => {
    // Only close menus that aren't the excluded one
    if (menu !== excludeMenu) {
      menu.open = false;
    }
  });
}

// Handler for button clicks inside menus
function handleMenuButtonClick(clickedButton) {
  // Get the parent <details> element of the clicked button
  const parentMenu = clickedButton.closest('.collapsible-menu');
  
  // --- Add your button's action logic here ---
  console.log(`Executing action from: ${parentMenu.querySelector('summary').textContent}`);
  
  // Close all menus EXCEPT the one containing the clicked button
  closeAll(parentMenu);
}

// Optional: Keep your original "open one menu, close others" behavior for summary clicks
document.querySelectorAll('.collapsible-menu summary').forEach(summary => {
  summary.addEventListener('click', function() {
    const parentMenu = this.closest('.collapsible-menu');
    closeAll(parentMenu);
  });
});

How this works: #

• clickedButton.closest('.collapsible-menu') grabs the exact <details> element that contains the button you clicked—this is the menu we want to keep open.
• The updated closeAll() checks each menu, and only closes it if it's not the excluded parent menu.
• We kept the summary click behavior intact so opening a new menu still closes all others, which matches your original setup.

Just adjust the class name (collapsible-menu) if you're already using a different class for your menus, and replace the console log with your actual button action logic.

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