网站Show/Hide按钮首次需双击问题及代码修改求助

Hey there! Let's break down why that double-click quirk is happening and fix it right up.

The Root of the Problem #

Your CSS sets #menu to display: none, but here's the catch: JavaScript's x.style.display only reads inline styles (styles written directly in the element's style attribute), not styles from external or internal CSS sheets.

So when you first click the button, x.style.display is an empty string (not "none"), which makes the code jump to the else branch and set display: none—but the menu was already hidden! That's why you need a second click: now x.style.display is actually "none", so the code switches it to block.

Fixes That Work (Pick Your Favorite) #

1. Toggle a CSS Class (Most Recommended)

This keeps your styles and logic separate, which is cleaner and easier to maintain long-term.

First, update your CSS:

#menu { 
  background: rgba(0, 0, 0, 0); 
  position: absolute; 
  z-index: 1; 
  top: 60px; 
  right: 50px; 
  width: 150px; 
  font-family: 'Open Sans', sans-serif; 
  display: block; /* Default to visible */
}

/* Add a reusable hidden class */
.hidden {
  display: none !important;
}

Then add the hidden class to your menu element:

<div id="menu" class="hidden">This is a menu</div> 
<button onclick="showhidemenu()">Show/hide</button>

Simplify your JavaScript to toggle the class:

function showhidemenu() { 
  var x = document.getElementById("menu"); 
  x.classList.toggle("hidden"); // Automatically adds/removes the class
}

Now the first click removes the hidden class (showing the menu), and the second click adds it back—no double-click needed!

2. Check the Computed Style (If You Don't Want to Rewrite CSS)

If you prefer to keep your existing CSS structure, you can use getComputedStyle to check the menu's actual rendered state:

function showhidemenu() { 
  var x = document.getElementById("menu"); 
  var actualDisplay = window.getComputedStyle(x).display;
  
  if (actualDisplay === "none") { 
    x.style.display = "block"; 
  } else { 
    x.style.display = "none"; 
  } 
}

getComputedStyle reads the final style applied to the element (regardless of where it comes from), so the first click will correctly detect the menu is hidden and show it.

3. Use Inline Style (Quick Fix, Less Flexible)

A simple but less maintainable fix is to move the display: none into an inline style on the menu element:

<div id="menu" style="display: none;">This is a menu</div> 
<button onclick="showhidemenu()">Show/hide</button>

Now x.style.display will read "none" on the first click, so your original function works as expected. But mixing styles into HTML isn't ideal for larger projects.

Any of these solutions will fix the double-click issue—go with the class toggle method if you want clean, scalable code!

内容的提问来源于stack exchange，提问作者Louis Chaussé