Javascript 选择后关闭移动菜单

在一些在线代码的帮助下，我为我的单页网站创建了一个移动菜单。目前，由于我使用的javascript代码，仅当您选择主导航栏时，菜单才会打开/关闭。一旦选择了菜单项，菜单是否可以关闭，以便在选择菜单项且页面滚动到定位点时，导航菜单关闭且不保持打开状态

以下是我当前菜单的一个示例：

HTML:

这里的标志

要再次切换菜单，必须将事件绑定到

LIA

$（文档）.ready（函数（）{
var touch=$（“#触摸菜单”）；
变量菜单=$（'.menu'）；
$（触摸）。在（'点击'）上，功能（e）{
e、 预防默认值（）；
menu.slideToggle（）；
});
$（“ul.menu”）。查找（“li a”）。单击（函数（）{
if（menu.hasClass（'mobile'））menu.slideToggle（）；
});
$（窗口）。调整大小（函数（）{
var w=$（window.width（）；
如果（w>900）{
menu.removeAttr（'style'）；
menu.removeClass（'mobile'）；
}否则{
menu.addClass（'mobile'）；
}
});
//最初设置类名
var w=$（window.width（）；
如果（w>900）{
menu.removeAttr（'style'）；
menu.removeClass（'mobile'）；
}否则{
menu.addClass（'mobile'）；
}
});
/*------------谷歌字体--------*/
@导入url(http://fonts.googleapis.com/css?family=Open+Sans:400400斜体，600700800）；
/*重置样式*/
*，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}
正文{背景：#000；
字体：14px“开放式Sans”，Helvetica，Arial，无衬线；
宽度：100%；}
导航显示：块；
背景：#ffffff；
文本对齐：右对齐；
}
.菜单{显示：块；}
.菜单li{显示：内联块；
位置：相对位置；
z-索引：100；}
.menu li:第一个子项{左边距：0；}
.menu li a{字体大小：600；
文字装饰：无；
填充：40px 20px；
显示：块；
颜色：#393939；
-webkit转换：所有0.2都易于输入输出0；
-moz转换：所有0.2秒均为0秒；
-o型转换：所有0.2秒缓进输出0秒；
-ms转换：所有0.2秒缓进缓出0秒；
过渡：所有0.2秒缓进缓出0秒；
}
.menu li a:hover、.menu li:hover>a{color:#B11A25；
背景：#e4；}
.菜单ul{显示：无；
保证金：0；
填充：0；
宽度：150px；
位置：绝对位置；
顶部：43px；
左：0px；
背景：#ffffff；
}
.菜单ul li{显示：块；
浮动：无；
背景：无；
保证金：0；
填充：0；
}
.menu ul li a{字体大小：12px；
字体大小：正常；
显示：块；
颜色：#7979；
左边框：3px实心#ffffff；
背景：#ffffff；}
.menu ul li a:悬停，.menu ul li:悬停>a{
背景：#f0；
左边框：3px实心#B11A25；
颜色：#7979；
}
.menu li:hover>ul{display:block；}
.菜单ul{左：149px；
顶部：0px；
}
.移动菜单{显示：无；
宽度：100%；
填充：16px；
背景：#ffffff；
颜色：#393939；
文本转换：大写；
字号：600；
}
.移动菜单：悬停{背景：#ffffff；
颜色：#393939；
文字装饰：无；
}
.mobile菜单img{显示：块；边距：0自动；}
.mobile菜单下拉列表{显示：表格；边距：10px自动0；}
.header徽标{位置：绝对；填充：30px；}
@介质（最大宽度：900px）{
.菜单{显示：无；}
.mobile菜单{显示：块；}
净空边距：0；
背景：无；}
.菜单li{显示：块；
边距：0；}
.menu LIA{背景：#ffffff；
颜色：#7979；
边框顶部：1px实心#e0；
左边框：3px实心#ffffff；
填充：20px；
}
.menu li a:悬停，.menu li:悬停>a{
背景：#e4；
颜色：#B11A25；
左边框：3px实心#B11A25；}
.菜单ul{显示：块；
位置：相对位置；
排名：0；
左：0；
宽度：100%；}
.menu ul{左：0；}
.header徽标{显示：无；}
.mobile徽标{文本对齐：居中；}
导航{文本对齐：左！重要；}

这里的标志









我在您的jQuery中做了一个更改。我在li元素上添加了一个单击处理程序。要完成滚动到页面的特定部分，您需要为每个div或section提供一个id并链接到该特定id，如下所示：

   <a href="#contact">Contact</a>
   ...
   <div id="contact">
   ...
   ...
   </div>


...
...
...

如果您需要更清晰的说明，请告诉我！
slideToggle（）
菜单当用户点击
菜单中的链接时，在菜单中的
a
中添加一个公共类，并将点击回调绑定到该类中，会更干净。很高兴提供帮助！如果解决了您的问题，请接受作为答案：）我发现当屏幕宽度大于900px且较大的菜单a显然，当你点击其中一个菜单项时，页面会按预期滚动到锚点，但是菜单列表会向上滑动并消失，就像手机菜单在点击时消失一样。我该如何解决这个问题？当你调整大小时，将一个类添加到手机，并将click事件添加到该类而不是menuSorry，我的javascript并不是最好的。i upd在我的javascript代码中添加了你的代码，我还需要做任何其他更改吗？你能帮我更新JSFIDLE链接吗？非常感谢