汉堡菜单点击导航链接后消失，如何恢复按钮可点击状态？

Hey there! I see exactly what's going on here. When you click a navigation link, your current code uses $('.menu-section').hide() which completely hides the entire menu container—including your hamburger button. That's why it vanishes on you! Instead, we need to reverse the classes we added when opening the menu, not hide the whole section.

Here's the breakdown of the fix: #

• Instead of hiding .menu-section, we'll remove the on class from both .menu-toggle and .menu-section
• We'll add back the hidden class to nav ul to collapse the navigation
• This way, the hamburger button stays visible and returns to its original state, ready to be clicked again.

Revised jQuery Code #

$(document).ready(function () {
  // Toggle menu open/close when hamburger is clicked
  $('.menu-toggle').click(function (e) {
    $(this).toggleClass('on');
    $('.menu-section').toggleClass('on');
    $('nav ul').toggleClass('hidden');
    e.preventDefault();
  });

  // Handle navigation link clicks
  $('nav ul a').click(function () {
    // Reverse the menu state instead of hiding the section
    $('.menu-toggle').removeClass('on');
    $('.menu-section').removeClass('on');
    $('nav ul').addClass('hidden');
  });
});

Why this works: #

• removeClass('on') reverts the hamburger icon back to its three-line state (since your CSS styles the on class to transform the lines into an X)
• Removing on from .menu-section takes away the full-screen background and resets its positioning
• Adding hidden back to nav ul collapses the navigation menu, just like it was initially

Your Original HTML (no changes needed here) #

<div class="menu-section"> 
  <div class="menu-toggle"> 
    <div class="one"></div> 
    <div class="two"></div> 
    <div class="three"></div> 
  </div> 
  <nav> 
    <ul role="navigation" class="hidden"> 
      <li><a href="#about">About</a></li> 
      <li><a href="#work">Work</a></li> 
      <li><a href="#pricing">Pricing</a></li> 
      <li><a href="#contact">Contact</a></li> 
    </ul> 
  </nav> 
</div>

Your Original CSS (no changes needed here) #

.menu-toggle.on .one { 
  -moz-transform: rotate(45deg) translate(7px, 7px); 
  -ms-transform: rotate(45deg) translate(7px, 7px); 
  -webkit-transform: rotate(45deg) translate(7px, 7px); 
  transform: rotate(45deg) translate(7px, 7px); 
} 
.menu-toggle.on .two { opacity: 0; } 
.menu-toggle.on .three { 
  -moz-transform: rotate(-45deg) translate(8px, -10px); 
  -ms-transform: rotate(-45deg) translate(8px, -10px); 
  -webkit-transform: rotate(-45deg) translate(8px, -10px); 
  transform: rotate(-45deg) translate(8px, -10px); 
} 
.one, .two, .three { 
  width: 100%; 
  height: 5px; 
  background: @color2; 
  margin: 6px auto; 
  backface-visibility: hidden; 
  -moz-transition-duration: 0.3s; 
  -o-transition-duration: 0.3s; 
  -webkit-transition-duration: 0.3s; 
  transition-duration: 0.3s; 
} 
nav ul { 
  margin: 0; 
  padding: 0; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  font-family: 'Ubuntu', sans-serif; 
  list-style: none; 
  text-align: center; 
  width: 100%; 
} 
nav ul.hidden { display: none; } 
nav ul a { 
  -moz-transition-duration: 0.5s; 
  -o-transition-duration: 0.5s; 
  -webkit-transition-duration: 0.5s; 
  transition-duration: 0.5s; 
  text-decoration: none; 
  color: @color2; 
  font-size: 2.5em; 
  line-height: 1.5; 
  width: 100%; 
  display: block; 
  font-family: 'Ubuntu' sans-serif; 
} 
nav ul a:hover { 
  background-color: rgba(0, 0, 0, 0.5); 
  background-color: @color4; 
} 
.menu-section.on { 
  z-index: 10; 
  width: 100%; 
  height: 100%; 
  display: block; 
  background-color: rgba(0, 0, 0, 0.75); 
  position: absolute; 
}

Just swap out your current jQuery with the revised version, and your hamburger menu will stay visible and reset properly after each link click!

内容的提问来源于stack exchange，提问作者Betsy Nunnally