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

Question

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

Cod*_*nds 6 javascript jquery addeventlistener hamburger-menu

我有一个很棒的小汉堡导航菜单几乎工作,但有一些奇怪的行为只有在我调整窗口两次后才会发生.如果我在窗口较窄(宽度<800px)时加载页面,或者如果我在加宽(宽度> 800px)时加载并调整为缩小,则汉堡按钮会执行应有的操作.

如果出现以下问题:

我在狭窄时加载(宽度<800px),
然后切换导航菜单,
然后调整宽度(宽度> 800px),
然后调整大小(宽度<800px).

当我完成这些步骤时,汉堡包按钮切换菜单打开(应该如此),但随后它也立即切换到关闭,我不希望它做.

我很确定我对事件监听器做错了,我相信我的javascript应该受到责备.如果你可以帮我修理它,以便汉堡包按钮始终切换菜单打开,我将不胜感激!

这是codepen: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();
});
});
};

Run Code Online (Sandbox Code Playgroud)

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;
}

  
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Fis*_*iri 2

只需移动汉堡（）；函数 WidthChange(mq) {}之外

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

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

归档时间：	9 年，6 月前
查看次数：	100 次
最近记录：	7 年，6 月前