我已经通过一些在线代码的帮助为我的单页网站创建了一个移动菜单。目前，只有当我使用的javascript代码选择主导航栏时，才会打开/关闭菜单。选择菜单项后菜单是否可以关闭，以便在选择菜单项并且页面滚动到锚点时，导航菜单会关闭并且不会保持打开状态？
以下是我当前菜单的示例：https://jsfiddle.net/kmracozg/
HTML：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
</head>
<a id="touch-menu" class="mobile-menu" href="#"><div class="mobile-logo">LOGO HERE</div><div class="mobile-menu-dropdown">MENU</div></a>
<div class="header-logo">LOGO HERE</div>
<nav>
<ul class="menu">
<li><a href="#"></i>HOME</a>
<li><a href="#"></i>ABOUT</a>
<li><a href="#"></i>SOLUTIONS</a>
<li><a href="#"></i>WORK</a>
<li><a href="#"></i>CONTACT</a>
<li><a href="#"></i><b>CLIENT AREA</b></a>
</ul>
</nav>
CSS：
/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
body{background:#000;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
width:100%;}
nav{display:block;
background:#ffffff;
text-align: right;
}
.menu{display:block;}
.menu li{display: inline-block;
position: relative;
z-index:100;}
.menu li:first-child{margin-left:0;}
.menu li a {font-weight:600;
text-decoration:none;
padding:40px 20px;
display:block;
color:#393939;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover, .menu li:hover > a{color:#B11A25;
background:#e4e4e4;}
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}
.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #B11A25;
color:#797979;
}
.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
top: 0px;
}
.mobile-menu{display:none;
width:100%;
padding:16px;
background:#ffffff;
color:#393939;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#ffffff;
color:#393939;
text-decoration:none;
}
.mobile-menu img { display: block; margin: 0 auto; }
.mobile-menu-dropdown{ display: table; margin: 10px auto 0; }
.header-logo { position: absolute; padding: 30px; }
@media (max-width: 900px) {
.menu{display:none;}
.mobile-menu{display:block;}
nav{margin:0;
background:none;}
.menu li{display:block;
margin:0;}
.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;
padding:20px;
}
.menu li a:hover, .menu li:hover > a{
background:#e4e4e4;
color:#B11A25;
border-left:3px solid #B11A25;}
.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}
.menu ul ul {left:0;}
.header-logo { display: none; }
.mobile-logo { text-align: center; }
nav { text-align: left !important; }
使用Javascript：
$(document).ready(function(){
var touch = $('#touch-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 900 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
答案 0 :(得分：1)
要再次切换菜单，您必须将事件绑定到li a
$(document).ready(function(){
var touch = $('#touch-menu');
var menu = $('.menu');
$(touch).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$("ul.menu").find("li a").click(function() {
if(menu.hasClass('mobile')) menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 900) {
menu.removeAttr('style');
menu.removeClass('mobile');
} else {
menu.addClass('mobile');
}
});
// initially to set the class name
var w = $(window).width();
if(w > 900) {
menu.removeAttr('style');
menu.removeClass('mobile');
} else {
menu.addClass('mobile');
}
});/* ---------- Google Font ---------- */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* RESET STYLES */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
body{background:#000;
font: 14px "Open Sans", Helvetica, Arial, sans-serif;
width:100%;}
nav{display:block;
background:#ffffff;
text-align: right;
}
.menu{display:block;}
.menu li{display: inline-block;
position: relative;
z-index:100;}
.menu li:first-child{margin-left:0;}
.menu li a {font-weight:600;
text-decoration:none;
padding:40px 20px;
display:block;
color:#393939;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.menu li a:hover, .menu li:hover > a{color:#B11A25;
background:#e4e4e4;}
.menu ul {display: none;
margin: 0;
padding: 0;
width: 150px;
position: absolute;
top: 43px;
left: 0px;
background: #ffffff;
}
.menu ul li {display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.menu ul li a {font-size:12px;
font-weight:normal;
display:block;
color:#797979;
border-left:3px solid #ffffff;
background:#ffffff;}
.menu ul li a:hover, .menu ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #B11A25;
color:#797979;
}
.menu li:hover > ul{ display: block;}
.menu ul ul {left: 149px;
top: 0px;
}
.mobile-menu{display:none;
width:100%;
padding:16px;
background:#ffffff;
color:#393939;
text-transform:uppercase;
font-weight:600;
}
.mobile-menu:hover{background:#ffffff;
color:#393939;
text-decoration:none;
}
.mobile-menu img { display: block; margin: 0 auto; }
.mobile-menu-dropdown{ display: table; margin: 10px auto 0; }
.header-logo { position: absolute; padding: 30px; }
@media (max-width: 900px) {
.menu{display:none;}
.mobile-menu{display:block;}
nav{margin:0;
background:none;}
.menu li{display:block;
margin:0;}
.menu li a {background:#ffffff;
color:#797979;
border-top:1px solid #e0e0e0;
border-left:3px solid #ffffff;
padding:20px;
}
.menu li a:hover, .menu li:hover > a{
background:#e4e4e4;
color:#B11A25;
border-left:3px solid #B11A25;}
.menu ul {display:block;
position:relative;
top:0;
left:0;
width:100%;}
.menu ul ul {left:0;}
.header-logo { display: none; }
.mobile-logo { text-align: center; }
nav { text-align: left !important; }<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" ></script>
</head>
<a id="touch-menu" class="mobile-menu" href="#"><div class="mobile-logo">LOGO HERE</div><div class="mobile-menu-dropdown">MENU</div></a>
<div class="header-logo">LOGO HERE</div>
<nav>
<ul class="menu">
<li><a href="#"></i>HOME</a>
<li><a href="#"></i>ABOUT</a>
<li><a href="#"></i>SOLUTIONS</a>
<li><a href="#"></i>WORK</a>
<li><a href="#"></i>CONTACT</a>
<li><a href="#"></i><b>CLIENT AREA</b></a>
</ul>
</nav>
答案 1 :(得分：0)
https://jsfiddle.net/kmracozg/3/
我在你的jQuery中做了一些改变。我在li元素上添加了一个click处理程序。要完成滚动到页面的特定部分，您需要为每个div或部分指定一个id并链接到该特定ID，如下所示：
<a href="#contact">Contact</a>
...
<div id="contact">
...
...
</div>
如果您需要更清晰，请告诉我们！