通过仅在特定浏览器宽度处单击任意位置来自动关闭菜单答案

【问题标题】：Auto close menu by clicking anywhere only at specific browser width通过仅在特定浏览器宽度处单击任意位置来自动关闭菜单
【发布时间】：2013-11-19 12:43:49
【问题描述】：

我制作了一个简单的 jsfiddle 来显示问题：
http://jsfiddle.net/jacqueline01/rCW85/

请调整您的浏览器大小以查看下拉/切换菜单。这个简化的小提琴是从this tutorial 创建的。

问题
当下拉/切换菜单可见时，我希望它在单击链接或单击菜单外部时自动关闭。只有当浏览器宽度小于 500 像素时才会发生这种情况。（见小提琴）

我尝试添加以下内容：

$("html").click(function() {
    // Code to slideUp the .menu-items
});

不过，这个功能——当然——也适用于浏览器宽度超过 500 像素的情况。我无法让它在

所以我正在寻找一种在移动菜单可见后通过单击 HTML 内的任意位置来滑动菜单的方法。

感谢任何帮助。提前致谢！

【问题讨论】：

【解决方案1】：

尝试简单的 css 菜单，这会更好 jsfiddle.net/rCW85/10（检查外部资源部分中的 css。在 micjamking.github.io/Navigataur 演示您只需将媒体查询中的宽度更改为 500

如果你想在用户点击外部时关闭菜单，试试这个 jsfiddle.net/aamir/rCW85/11

【讨论】：

我刚刚发现了一些奇怪的东西：1.当浏览器小于500px时打开菜单（切换）2.不要关闭它3.调整浏览器大小以查看桌面菜单4.点击一个链接 5. 导航消失。之后调整浏览器大小时，导航会再次出现。我认为没有人会按此顺序执行这些操作，但也许您（或其他任何人）知道此问题的解决方案？提前致谢！
编辑： 4. 单击文档中的链接或任何位置，导航将消失。
试试更简单的css菜单jsfiddle.net/rCW85/10（查看外部资源部分的css。演示micjamking.github.io/Navigataur你只需将媒体查询中的宽度更改为500
你说得对，只有 CSS 才是更好的解决方案。唯一的问题是，当您在外部单击时，您显示的示例不会关闭。普通访问者希望单击任意位置以关闭菜单。该菜单适用于单页网站，这就是单击后应自动关闭的原因。不过感谢您的建议，非常感谢！
您还可以使用 css3 为菜单的隐藏和显示设置动画（Google it how）