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

Question

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

如果出现此问题：

我在窄（宽度 < 800px）时加载，
然后切换导航菜单，
然后调整为宽（宽度 > 800px），
然后调整大小以缩小（宽度 < 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() 函数中，您继续为点击事件附加监听器。

也许您应该这样做，只需在页面加载时执行一次，因为您不需要在每次显示汉堡包和十字按钮等元素时都附加侦听器。

您的函数应该如下所示：

// Called at the beginning one time only!
hamburger();

// media query change /
function WidthChange(mq) {

  if (mq.matches) {

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

       $(".nav" ).slideToggle("slow",function() {
            // Animation complete.
       });
       // you don't need it here
       // hamburger();
  } else {

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

  }

};

Answer 2

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

hamburger() 函数只能调用一次。现在，它位于 WidthChange(mq) 函数中，因此每次出现 "match".

时都会调用它

尝试调整 window 两次以上，您会看到菜单会上下弹出两次以上。

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

Why is my hamburger menu toggling twice instead of only once after two screen resizes?

javascript

jquery

addeventlistener

hamburger-menu