在平板电脑上单击关闭时使菜单消失答案

【问题标题】：Make menu dissappear on clickoff on tablet在平板电脑上单击关闭时使菜单消失
【发布时间】：2015-06-15 19:19:36
【问题描述】：

使用 HTML、CSS 和 JS（技术上是 Angular，如果你认为它很重要的话）

以桌面样式查看时，我有一个带有下拉子菜单和子子菜单的标题菜单。
在 PC 上，子菜单出现在悬停时，单击条目会将您带到某个地方。
- 单击根条目会将您带到不同的地方 - 因此它有两个用途：成为某个位置的链接以及成为下拉菜单的悬停触发器。
并非所有根元素都有子菜单。
有一个单独的移动菜单，基于宽度媒体查询，但平板电脑（尤其是在横向模式下）以桌面样式显示，这让我很吃惊！

在平板电脑上（在 Safari iOS 和 Chrome for iPad 中进行了测试），浏览器具有强大的魔力！...

对于没有下拉菜单的元素，然后单击它们会将您带到链接。
对于具有下拉子菜单的元素，然后
- 第一次单击具有激活悬停的效果 - 它不会激活链接，但会显示菜单。
- 第二次点击会激活链接。

可爱！

问题是……如果您点击菜单，它们不会消失。

点击页面通常没有任何作用（没有引发点击事件）
点击页面上可点击的内容会清除菜单，并且还会为您点击的任何内容调用点击操作。

我的第一个想法是在整个页面的其余部分放置一个透明的 div，在页面上方但在菜单下方，并绑定一个可以清除菜单的点击事件。但是，我无法点击 both 的透明层和底层页面。 See here for the problems I hit there.

将点击事件放在主体上（以便它被冒泡触发）不起作用（点击事件不会被触发。）

我尝试添加 ngTouch，这确实会导致到处触发点击事件，但也会破坏子菜单打开的行为 - 所有链接都会立即触发，您无法访问子菜单。

有什么想法吗？救命！

【问题讨论】：

请向我们展示您正在使用的实际代码，以便能够重现问题。

标签： javascript angularjs drop-down-menu hover click

【解决方案1】：

您只需要检查点击是否发生在下拉菜单之外。

类似：

$('html').click(function (e) {
    if (e.target.id == '#yourDropdown') {
        //do nothing and let the click be handled
    } else {
        $('#yourDropdown').hide();
          // still let the click be propagated
    }
});

【讨论】：

这不起作用（之前的评论是错误的，我运行了过期的代码） - 根据原始描述，没有触发点击事件。

【解决方案2】：

然后依靠“移动浏览器魔法”我会自己实现它。没有 Angular 经验，但在 jQuery 中代码可能看起来像这样：

$('.menu li').on('click', function(e) {
    var $target = $(this);
    var $sub = $target.children('ul');

    // only if sub and not yet active
    if ($sub.length && ! $target.hasClass('active')) {
        // show sub
        $target.addClass('active');
        // done
        e.stopPropagation();
        return false;
    }

    // normal click action triggered here
    alert($target.children('a').text());
    e.stopPropagation();
});

$('html').on('click', function(e) {
    // clear all active menu items
    $('.menu > li.active').removeClass('active'); 
});

还有一个简单的例子：http://jsfiddle.net/b0aqr1wc/

【讨论】：

【解决方案3】：

：叹息：今天早上和我讨论过这个问题的一位同事立即解决了这个问题：

使用“封面”方法，但在折叠菜单的同时折叠工作表。

您只需点击 1 次就无法与底层页面交互 - 并且该点击会明显折叠菜单，因此用户将收到重试提示。

【讨论】：