侧边滑出菜单（Off canvas menu）点击函数异常问题

Hey there! Let's break down why your off-canvas menu only opens once, then won't come back—and how to fix it quickly.

The Root Problem #

Right now, you're using two separate CSS classes (active and hide) to control the sidebar's visibility, paired with toggle() in your JavaScript for both functions. Here's what happens step-by-step:

1. You click the toggle button: show() adds the active class, sidebar slides in (left: 0).
2. You click the close icon: hide() adds the hide class, sidebar slides out (left: -250px). Now your sidebar has both active and hide classes.
3. You try clicking the toggle button again: show() removes the active class (since toggle() flips the state), but the hide class is still there. The CSS for #sidebar.hide overrides any other positioning, so the sidebar stays hidden.

The Fix #

We only need one class to control the menu's state. Let's simplify things:

Step 1: Clean Up Your CSS

Remove the #sidebar.hide rule entirely—we don't need it anymore. Keep only the base sidebar style and the active state:

#sidebar{
position: absolute;
width:220px;
height:100%;
background:white;
left:-250px;
transition: .4s;
}
#sidebar.active{
left:0;
}

Step 2: Update Your JavaScript

Make both functions work with the same active class. For clarity, use add() for opening the menu and remove() for closing it (instead of toggle() for both):

function show(){
  document.getElementById('sidebar').classList.add('active');
}
function hide(){
  document.getElementById('sidebar').classList.remove('active');
}

Why This Works #

• When you click the toggle button, show() adds the active class, forcing the sidebar to slide into view.
• When you click the close icon, hide() removes the active class, sending the sidebar back off-screen.
• No conflicting classes mean every click on the toggle button will reliably add the active class (even if it's already there—add() doesn't duplicate classes) and open the menu.

Optional: Even Cleaner Toggle (If You Want) #

If you prefer the toggle button to also close the menu when it's open, you can use toggle() in the show() function instead of add():

function show(){
  document.getElementById('sidebar').classList.toggle('active');
}
function hide(){
  document.getElementById('sidebar').classList.remove('active');
}

This way, clicking the toggle button switches the menu state (open ↔ close), while the close icon always closes it.

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