javascript - 我可以使用 jQuery 为我制作一个下拉菜单。我怎样才能使用 jQuery 让它回到原来的位置？

Question

如标题所述，我能够设计一个漂亮的菜单，当屏幕尺寸低于 500 像素(移动视口(viewport))时响应迅速。 我还能够将其下拉并显示所有可用的类。

但是，我很难尝试使“.handler”(菜单 div)在第二次单击时返回到其原始位置。换句话说，我现在需要关闭菜单，而且我不知道如何让 jQuery 监听第二次点击。

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

试试这个，然后在第二次点击时恢复更改(关闭菜单)；

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

了解更多详情:Alternative to jQuery's .toggle() method that supports eventData?