Jquery navi菜单切换

我为我的站点设置了一个切换navi菜单，当前代码允许用户在单击菜单链接时关闭菜单，但在单击页面上的任何其他位置时它不会关闭。我希望在用户单击除活动菜单外的任何位置时隐藏菜单。这是我的密码：

<script type="text/javascript">
$(document).ready(function() {
$('#toggleLink').click(function() {
    $('#showme1').slideToggle(600);
    $('#showme2,#showme3,#showme4').hide (400);
    });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#toggleLink2').click(function() {
    $('#showme2').slideToggle(600);
    $('#showme1,#showme3,#showme4').hide (400);

    });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#toggleLink3').click(function() {
    $('#showme3').slideToggle(600);
    $('#showme1,#showme2,#showme4').hide (400);

    });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#toggleLink4').click(function() {
    $('#showme4').slideToggle(600);
    $('#showme1,#showme2,#showme3').hide (400);
    });
});
</script>`

---

这是我要做的。创建一个最初隐藏的div，然后每当切换菜单时，显示绝对位于菜单后面的div。然后将click偶数绑定到该div，以便在单击它时隐藏菜单

如果在cover div中取消对背景色的注释，您将看到它是如何工作的

添加HTML

添加jQuery

---

你能创建一个JSFIDLE吗？我从来没有使用过JSFIDLE，但是我复制并粘贴了我认为与此相关的代码。。。这太棒了！唯一的问题是，它可以在JSFIDLE中工作，但不能在dreamweaver中使用我的页面代码的其余部分。我已经添加/编辑了您给我的内容，但是现在单击时菜单不会显示。假设我点击了研究工具，什么都没有弹出。我真的不确定JSFIDLE和组合版本之间的区别是什么——我没有看到任何东西向我扑来。有什么建议吗？我首先打开浏览器的开发工具，查找错误。通常F12会打开它。好吧，看起来我失踪了}；在代码的末尾。把它放在那里，现在菜单会弹出，但是最初的问题是单击div之外的任何地方来关闭菜单还没有解决。我仍然需要单击菜单链接即“研究工具”或“说明资源”才能关闭菜单。请尝试向封面添加背景色，如我在回答中提到的，这样你就可以看到它是否正确显示。啊，我终于找到了。非常感谢你的帮助。看起来我只需要设置封面的宽度和高度就可以了。。。否则，它不会覆盖页面内容的其余部分，这意味着您只能单击页面左侧使菜单消失，而不是任何地方。但一旦我把它们设置为继承，它看起来就修复了。再次感谢你的帮助！这几周来我一直很沮丧。

<div id="cover"></div>

#cover {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:1;
    display:none;
}

$('#toggleLink,#toggleLink2,#toggleLink3,#toggleLink4,#toggleLink5').on("click", function () {
    $('#cover').show();
});
$('#cover').click(function () {
    $('#showme1,#showme2,#showme3,#showme4,#showme5').hide(400);
    $(this).hide();
});