1

所以我正在开发一个网站，尤其是移动版。我制作了一个“下拉”菜单，当用户单击“导航图标”时它会向下滑动。而且当用户点击“navicon”时，网站会向下滚动到实际的“navicon”图像，以使移动导航更流畅、更快。现在我想不出一种方法（也找不到任何地方的答案），不仅使滚动功能仅在菜单向下滑动而不是向上滑动时才起作用。但我也希望菜单项在您单击它们时关闭菜单。有什么帮助吗？

这是我的代码：

<----------------------------HTML------------------------ -->

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

<----------------------------CSS------------------------ -->

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

<----------------------------JQUERY------------------------ -->

$(".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);
});
4

0 回答 0