使用滚动功能制作移动下拉菜单？

Question

所以我正在网站上工作，特别是移动版。我做了一个＆＃34;下拉＆＃34;当用户点击＆＃34; navicon＆＃34;时向下滑动的菜单。当用户点击＆＃34; navicon＆＃34;该网站向下滚动到实际的＆＃34; navicon＆＃34;图像使移动导航更流畅，更快捷。现在我无法找到一种方法（也没有在任何地方找到答案），不仅使滚动功能仅在菜单向下滑动而不向上滑动时起作用。但我也希望菜单项在您点击它们时关闭菜单。有什么帮助吗？

这是我的代码：

＆LT; ------------------------- HTML ------------------- ------＆GT;

<div class="naviconbutton displaydesktop displaytablet" id="navbutton">

<img src="sitefiles/img/navicon-black.png" alt="navicon" class="navicon">

</div>

<nav class="displaydesktop displaytablet">

<ul id="menu-m">

<li class="click click1"> Menu 1 </li>

<li class="click click2"> Menu 2 </li>

<li class="click click3"> Menu 3 </li>

<li class="click click4"> Menu 4 </li>

</ul>

</nav>

＆LT; ------------------------- CSS ------------------- ------＆GT;

.naviconbutton {
background:#ddd;
width:100%;
opacity:0.3;
float:left;
margin:20px 0 0 0;
padding:20px 0 20px 0;
}

.naviconbutton .navicon {
display:block;
margin:0 auto;
width:10%;
padding:0;
}

#menu-m {
overflow:hidden;
float:left;
background:#eee;
width:100%;
list-style:none;
padding:0;
margin:0;
height:0px;

-webkit-box-shadow:inset 0 0 15px #999999;
-moz-box-shadow:inset 0 0 15px #999999;
-ms-box-shadow:inset 0 0 15px #999999;
box-shadow:inset 0 0 15px #999999;

-webkit-transition:height ease 0.3s;
-moz-transition:height ease 0.3s;
-ms-transition:height ease 0.3s;
transition:height ease 0.3s;
}

#menu-m.slide {
height:313px;
}

#menu-m li {
display:block;
width:100%;
float:left;
padding:30px;
text-align:center;
font-family:"Lato";
font-weight:300;
font-size:15px;

-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

＆LT; ------------------------- JQUERY ------------------- ------＆GT;

$(".naviconbutton").click(function(){
$("#menu-m").toggleClass("slide");
$("html, body").animate({
scrollTop: $("#navbutton").offset().top
}, 400);
});

$(".click").click(function(){
$("#menu-m").removeClass("slide");
});

$(".click1").click(function(){
$("html, body").animate({
scrollTop:("600px")
}, 400);
});