javascript - 为什么我的汉堡包菜单在两次屏幕大小调整后切换两次而不是只切换一次？

Question

我有一个很棒的小汉堡导航菜单，几乎可以正常工作，但是只有在我两次 调整窗口大小时才会出现一些奇怪的行为。如果我在窗口较窄(宽度 < 800 像素)时加载页面，或者如果我在窗口较宽(宽度 > 800 像素)时加载并调整大小以变窄，汉堡包按钮会执行它应有的操作。

问题发生在:

1. 我在窄(宽度 < 800 像素)时加载，
2. 然后切换导航菜单，
3. 然后调整到宽(宽度 > 800px)，
4. 然后调整大小以缩小(宽度 < 800 像素)。

当我完成这些步骤时，汉堡包按钮将菜单切换为打开(它应该如此)，但随后它也会立即将其切换为关闭，我不希望它这样做。

我很确定我在事件监听器上做错了什么，我相信我的 javascript 是罪魁祸首。如果您能帮助我修复它，使汉堡包按钮始终切换菜单打开，我将不胜感激!

这是代码笔:http://codepen.io/ihatecoding/pen/OXmRAd或者，如果您愿意，可以运行代码段。

// media query event handler
if (matchMedia) {
  var mq = window.matchMedia("(max-width: 800px)");
 mq.addListener( function() {
    WidthChange(mq);
  });
  WidthChange(mq);


};



// media query change /
function WidthChange(mq) {
 
  if (mq.matches) {

        $( "#hamburgerDiv" ).show();  
       $( ".hamburger" ).show();  
        $( ".cross" ).hide();

        $(".nav" ).slideToggle("slow",function() {
            // Animation complete.
         });

        hamburger();
      }
    
  else {

      $( ".nav" ).show();  
      $( "#hamburgerDiv" ).hide();
   };

};


function hamburger(){

$( ".hamburger" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});

$( ".cross" ).click(function() {
$( ".nav" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
};

html,
body {
  margin: 0;
  height: 100%
}

#header {
  position: fixed;
  top: 0;
  margin-bottom: -100px;
  left: 0;
  z-index: 999;
  padding-left: .5%;
  padding-right: .5%;
  background-color: #909090!important;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#areaTitle {
  text-transform: uppercase;
  box-sizing: border-box;
  text-transform: uppercase;
  text-decoration: none;
  color: White;
  vertical-align: middle;
  flex: 0 1 15%;
  padding: 0 !important;
  margin: 0!important;
}


#areaTitle a {
  text-transform: uppercase;
  font-size: 30px;
  text-decoration: none;
  color: White;
  vertical-align: middle !important;
  padding: 0 !important;
  margin: 0!important;
}

#nav {
  flex: 1 1 90%;
  padding: 0;
}

#menu {
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-right: 20px;
  text-align: right;
  vertical-align: top;
  width: auto;
  list-style: none;
  -webkit-text-stroke: 1px;
  letter-spacing: 2px;
}

#menu li {
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  color: #909090;
  /*area color*/
  display: inline;
}



a {
  color: white;
  text-decoration: none;
}


#fullpage{
  margin:10%;}

span {
  box-sizing:border-box;
  text-align: center;
  display: block;
  width: 100%;
  margin-top:60px;
  margin-bottom:60px;
}

h2 {color:MediumVioletRed;}

.important {color: Blue;
display: inline;
width: 10%;}


#menu li a {
  text-transform: uppercase !important; 
  text-decoration: none;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 15px;
  padding-right: 15px;
  white-space: nowrap;
}



/* ----------------------hamburger code------------------------*/

.cross{color:white;
float:right;
font-size:90px;
line-height:2px;
/*margin-top: 15px;*/
padding:36px 5px 0px 5px;
outline:none;
margin-top: 5px;
}


.hamburger{color:white;
float:right;
font-size:40px;
line-height:40px;
margin-top: 5px;
padding:0 5px 0px 5px;
}

.hamburgerDiv{display:none;
padding-right: 10px;}

/* ----media query for changing navigation and hamburger----------*/

@media screen and (max-width:800px) {



    #header {
     justify-content: left;
        flex-wrap: wrap;
        padding: 0 ;
    }

    #areaTitle a{font-size:4vw;}
   


    #menu {
        width: 100% !important;
        min-width: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #menu li {
        padding: 0;
        margin-left: 1%;
        margin-right: 1%;
    }
    #menu li a {
        padding: 0;
        margin: 0;
        font-size: 100%;
    }

      #nav {

        text-align: center;
        flex:0 0 100%;
        padding: 0 0 10px 0;
    }

  
  .hamburgerDiv{
    display:inline;
flex: 1 1 auto;
}

  
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

      <title>my hmaburger</title>
      
</head>

<body>
  
  
  <div id="header" class="header">
  
        <div id="areaTitle" class="navText">
                  
                  <a href="www.google.com">Hamburger problems</a>
        </div>
    
<div class="hamburgerDiv">
<button class="hamburger">&#9776;</button>
<button class="cross">&#735;</button>
</div>

    
        <nav id="nav">
              

         <ul id="menu" class="navbar-nav nav pubMenuList >
           <li id="first"><a href="#noanc" id="section0" class="navText"></a></li>
 
                              
                              <li id="first menuItem"><a href="#section1Anc" id="section1" class="navText">section 1</a></li>
           <li ><a href="#section2Anc" id="section2" class="navText">section 2</a></li>
           <li class="menuItem" ><a href="#section3Anc" id="section3" class="navText">section 3</a></li>
           <li class="menuItem"><a href="#section4Anc" id="section4" class="navText">section 4</a></li>
             <li class="menuItem"><a href="#section5Anc" id="section5" class="navText">section 5</a></li>
            <li class="menuItem"> <a href="#section6Anc" id="section6" class="navText">section 6</a></li>
           <li class="menuItem"> <a href="#section7Anc" id="section7" class="navText">section 7</a></li>
           <li class="menuItem"> <a href="#section8Anc" id="section8" class="navText">section 8</a></li>
      <li class="menuItem"> <a href="#section9Anc" id="section9" class="navText">section 9</a></li>
     
          </ul>

       </div>
  </div>

                                                 
<div id="fullpage">
                  
<section id="section1Anc" class="areaSection scrollto">
                                                         
                  <h1><span>Section 1</span></h1>

                  <div id = "section1Div" class = "pubSub">
      <p ><h2>On the surface it looks like my hamburger menu is working - but there is a problem.</p> <p>  The problem occurs if you resize the window from a small view (width <800 px), to a larger one (width > 800px), then back to a small view (width <800 px). Once the screen is returned to a smaller version, and you click on the hamburger, the menu toggles back and forth, instead of simply revealing the navigation.  Can you help me so it stops doing this? <span class="important">I think it might be happening because I don't know how to use event handlers properly.</span></p>
                                                          
 <p>IMPORTANT ELEMENTS: 
<ul>
<li><span class="important">#nav</span> is the list of menu items that I only want visible during wide screen and after the hamburger is pressed at width < 800px</li>

<li><span class="important">#hamburgerDiv</span> is the container that contains both the hamburger/open-menu button (.hamburger) and the cross/close-menu button (.cross) </li> 

<li><span class="important"> .hamburger </span>is the hamburger/open-menu button </li> 

<li><span class="important">.cross</span> is the cross/close-menu button </li><ul></h2></p>
                           
                           <img src="http://i.imgur.com/Q23PKdJ.gif" height="334" width="1045">
                     </div>


</section>

<section id="section2Anc" class="areaSection scrollto">

                <h1><span>Section 2</span></h1>
           <div id = "section2Div" class = "pubSub">
                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        

            </div>

</section>
  
                                                          
 <section id="section3Anc" class="areaSection scrollto">

                <h1><span>Section 3</span></h1>
           <div id = "section3Div" class = "pubSub">
                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>


            </div>

</section>
  
     
                                                
  <section id="section4Anc" class="areaSection scrollto">

                <h1><span>Section 4</span></h1>
           <div id = "section4Div" class = "pubSub">
                                                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        

            </div>

</section>
                                                 
     <section id="section5Anc" class="areaSection scrollto">

      <h1><span>Section 5</span></h1>
     <div id = "section5Div" class = "pubSub">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        


                                    </div>
</section>
                                             
     <section id="section6Anc" class="areaSection scrollto">

     <h1><span>Section 6</span></h1>
<div id = "section6Div" class = "pubSub">
                                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                        

                                        </div>
</section>
                                           
     <section id="section7Anc" class="areaSection scrollto">
  
     <h1><span>Section 7</span></h1>
   <div id = "section7Div" class = "pubSub">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                       
</div>
</section>

<section id="section8Anc" class="areaSection scrollto">

      <h1><span>Section 8</span></h1>
<div id = "section8Div" class = "pubSub">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                       
</div>
</section>

<section id="section9Anc" class="areaSection scrollto">
      <h1><span>Section 9</span></h1>

<div id = "proceedingsPubDiv" class = "pubSub">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>

<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>

<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>

<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>                       
                                              </div>
      </section>

      </div>
      
</body>

Answer 1

只需将 hamburger(); 移出 function WidthChange(mq) {}

hamburger() 函数应该只调用一次。现在，它位于 WidthChange(mq) 函数内，因此每次出现“匹配”时都会调用它。

尝试调整窗口大小两次以上，您会看到菜单会上下弹出两次以上。