我可以使用jQuery为我下拉菜单。 如何使用jQuery将其恢复到原始位置？

Question

Like the title states, I was able to design a nice menu that is responsive when the screen size is below 500px (Mobile viewport). I was also able to make it dropdown and show all available classes.

However, I'm having a hard time trying to make the ".handler" (menu div) go back to its original position on the 2nd click. In other words, I need to close the menu now, and I don't know how to tell jQuery to listen for the 2nd click.

 $(document).ready(function(){ $('.location').hover(function(){ $(this).effect("shake"); }); $('.affordable').hover(function(){ $(this).effect("bounce",{times:1},"slow"); }); $('.handler').on('click', function(){ $('.container').css("top", "447px"); $('.nBar').css("height", "300px"); $('.nav').css("height","298px"); $('.navigation').css("display","flex"); }); }); 

 * { margin:0; font-family: 'Roboto', sans-serif; } .topWrapper{ position: fixed; top:0; z-index:10; width: 100%; box-shadow: 0 0 25px black; } .header{ /*border: 1px solid rgb(0,0,0);*/ text-align: left; width: 100%; background-color: white; height:75px; position: relative; top:0px; } /*#title{ padding-left: 10px; padding-top: 10px; font-size: 50px; }*/ .titleTwo{ height:60px; padding-top: 10px; padding-left: 10px; } #contactBox{ position:absolute; right:20px; top:20px; width:100px; height:40px; background-color: rgb(239,172,166); color: rgb(80,100,119); transition: 0.25s; } #contactBox:hover{ background-color: rgb(80,100,119); color: rgb(239,172,166); box-shadow: 0px 0px 25px rgb(239,172,166); } /*CONTACT US BUTTON = FTEXT*/ .fText{ font-size: 15px; padding: 10px; } .nav{ height:50px; width:100%; border: 1px solid rgb(200,200,200); background-color: white; } .nBar{ display: flex; } li { display: inline-flex; padding: 15px 40px 10px 40px; } #home{ height:26px; margin-top: 0px; /*border: 1px solid black;*/ color: rgb(80,100,119); transition: 0.10s; } #bio{ height:26px; margin-top: 0px; /*border: 1px solid black;*/ color: rgb(80,100,119); transition: 0.10s; } #projects{ height:26px; margin-top: 0px; /*border: 1px solid black;*/ color: rgb(80,100,119); transition: 0.10s; } #services{ height:26px; margin-top: 0px; /*border: 1px solid black;*/ color: rgb(80,100,119); transition: 0.10s; } #contact{ height:26px; margin-top: 0px; /*border: 1px solid black;*/ color: rgb(80,100,119); transition: 0.10s; } #home:hover{ background-color: rgb(80,100,119); color:rgb(239,172,166); /*transition: 0.25s;*/ box-shadow: 0px 0px 15px rgb(239,172,166); } #bio:hover{ /*background-color: black;*/ background-color: rgb(80,100,119); color:rgb(239,172,166); /*transition: 0.25s;*/ box-shadow: 0px 0px 15px rgb(239,172,166); } #projects:hover{ background-color: rgb(80,100,119); color:rgb(239,172,166); /*transition: 0.25s;*/ box-shadow: 0px 0px 15px rgb(239,172,166); } #services:hover{ background-color: rgb(80,100,119); color:rgb(239,172,166); /*transition: 0.25s;*/ box-shadow: 0px 0px 15px rgb(239,172,166); } #contact:hover{ background-color: rgb(80,100,119); color:rgb(239,172,166); /*transition: 0.25s;*/ box-shadow: 0px 0px 15px rgb(239,172,166); } a{ text-decoration: none; color:black; } /*body starts here*/ .container{ position:absolute; top:127px; width:100%; z-index:1; } .content{ display: flex; width: 100%; min-width: 960px; flex-wrap: wrap; } .banner{ background-color: white; width:100%; height:400px; order: 1; overflow: hidden; } /*TO MAKE THESE IMAGES WORK, WE USUALLY MAKE THEM QUITE BIGGER THAN THE SPACE OF THE DIV TO CREATE THAT ZOOM EFFECT THEN WE ADD THAT MAX WIDTH 100% AND HEIGHT AUTO TO CREATE THE EFFECT*/ /*imgOne is in the banner div*/ .imgOne{ /*min-height: 400px;*/ width: 100%; height:auto; } /*.boxOne is the left quadrant below banner */ .boxOne{ background-color: red; width:50%; height:300px; order:2; } /*imgThree is inside boxOne*/ .imgThree{ width:100%; height:auto; max-height: 550px; } /*div to overlay imgThree which is inside boxOne*/ .slideThree{ /*tentative*/ } /*boxTwo is the right quadrant below the banner*/ .boxTwo{ /*test disable background-color: orange;*/ height:300px; width: 50%; order:2; } /*imgFour is the image in boxTwo*/ .imgFour{ width:100%; height:auto; max-height: 550px; } /*boxThree is 2nd banner*/ .boxThree{ background-color: rgb(200,200,200); width:100%; height:250px; order:3; overflow: hidden; } /*imgTwo is the image inside boxThree*/ .imgTwo{ width:100%; height:auto; } /*boxFour is the 3rd banner on the site*/ .boxFour{ width:100%; height: 325px; order:4; } .boxFour:hover{ opacity: 0.8; } .location{ text-align: center; padding-top: 30px; padding-bottom: 30px; font-size: 50px; } .location:hover{ color:rgb(239,172,166); } .intro{ text-align: center; padding:0px; } .affordable{ text-align: center; padding: 30px; font-size: 30px; } .affordable:hover{ color:rgb(239,172,166); } .introTwo{ text-align: center; } .footer { width: 100%; height:65px; min-height: 50px; background-color: white; order:4; text-align: center; border-top: 1px solid rgb(200,200,200); } .legal{ padding-top: 5px; font-size: 12px; } .legalText{ color:rgb(200,200,200); } .legalText:hover{ color:rgb(239,172,166); } .handler{ width: 100%; height:50px; background-color: rgb(80,100,119); color:rgb(239,172,166); text-align: left; padding: 20px 0 0 42px; font-size: 25px; display:none; cursor:pointer; } @media only screen and (max-width:500px){ /*HEADER STUFF*/ .topWrapper{ position:relative; min-width: 310px; -webkit-min-width: 310px; display:flex; flex-wrap: wrap; } .header{ flex-wrap: wrap; } /*#title{ font-size: 30px; }*/ .titleTwo{ height:30px; padding-left: 20px; padding-top: 30px; } .handler{ display: block; } .nBar{ align-content: stretch; transition: 0.4s; } ul{ margin-left: 0; padding-left: 0; } /*inserted .navigation because it will help differentiate the nav bar links when I add other "<a> links" along the page*/ .navigation{ width:100%; border: solid 1px rgb(200,200,200); /*added navigation display:none*/ display: none; transition: 0.4s; } .nav{ /*changed height from 298 px to 0px*/ /*height:298px;*/ height: 0px; transition: 0.4s; } li{ width:100%; font-size: 20px; } .nBar{ flex-wrap: wrap; /*changed height from 300 to 0px*/ /*height:300px;*/ height:0px; } /*/////////////CONTENT STUFF/////////////////*/ .container{ width: 100%; min-width: 310px; position:absolute; top:147px; /*this top value of 447px is what should be enabled*/ /*once the menu div is clicked*/ /*top:447px;*/ transition: 0.4s; } .content{ min-width: 310px; -webkit-min-width: 310px; display:flex; flex-wrap: wrap; } .banner{ overflow: hidden; order:0; height:100%; } .imgOne{ width:100%; } .boxOne{ height:233px; width:100%; order:1; } .boxTwo{ height:207px; width:100%; order:2; } .boxThree{ width: 100%; height:auto; order:3; } .imgTwo{ width: 100%; height:auto; } .boxFour{ width:100%; order:4; padding-bottom: 90px; } .footer{ } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <meta name="description" content="Dockmann Web Services"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="Paul Aranguren"> <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <link rel="icon" href="images/faviconR.png" type="image/x-icon" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <!-- <script src="jquery-3.1.1.min.js"></script> --> <script type="text/javascript" src="js/script.js"></script> <title>dockmann</title> </head> <body> <div class="topWrapper"> <div class="header"> <!-- <h1 id="title">DOCKMANN</h1> --> <a href="http://www.dockmann.com"><img class="titleTwo" src="css/images/DockmannH.svg" /></a> <a href="mailto:info@dockmann.com"><div id="contactBox"> <p class="fText"> Contact Us! </p> </div> </a> </div> <div class="nav"> <ul class="nBar"> <!--inserted .navigation because it will help differentiate the nav bar links when I add other "<a> links" along the page --> <a class="navigation" href="http://dockmann.com"><li id="home"> HOME </li></a> <a class="navigation" href="bio.html"><li id="bio"> BIO </li></a> <a class="navigation" href="projects.html"><li id="projects"> PROJECTS </li></a> <a class="navigation" href="services.html"><li id="services"> SERVICES </li></a> <a class="navigation" href="contact.html"><li id="contact"> CONTACT </li> </a> </ul> <div class="handler"> Menu </div> </div> </div> <div class="bodyWrapper"> <div class="container"> <div class="content"> <div class="banner"> <center> <img class="imgOne" src="css/images/constructionRX.jpg" /> </center> </div> <div class="boxOne"> <img class="imgThree" src="css/images/desk4RXOPT.jpg" /> </div> <div class="boxTwo"> <img class="imgFour" src="css/images/girls1RXOPT.jpg" /> </div> <div class="boxThree"> <img class="imgTwo" src="css/images/desk1RXOPT.jpg" /> </div> <div class="boxFour"> <h2 class="location">We're in Miami!</h2> <p class="intro"> As of 2016, Dockmann's Web Development Group is offering services based out of Miami. <br />(US-Eastern Time Zone; for International Projects) </p> <h2 class="affordable">Affordable Code</h2> <p class="introTwo"> Our packages are custom made in order to fit the budgets of our clients. </p> </div> <div class="footer"> <!-- add link here to disclaimer page --> <p class="legal"> <a class="legalText" href="disclaimer.html">LEGAL</a> </p> </div> </div> </div> </div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-82779137-1', 'auto'); ga('send', 'pageview'); </script> </body> </html> 

Answer 1

try this and just revert the changes(close menu) on second click;

 $('.handler').click(function() {
      var clicks = $(this).data('clicks');
      if (clicks) {
         // odd clicks
      } else {
         // even clicks
      }
      $(this).data("clicks", !clicks);
    });

for more details: Alternative to jQuery's .toggle() method that supports eventData?