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

Question

在 HTML、CSS 和 JS 中工作（技术上 Angular，如果您认为它很重要）

当以桌面样式查看时，我有一个带有下拉子菜单和子子菜单的页眉菜单。
在 PC 上，子菜单会在悬停时出现，单击条目会将您带到某个地方。
- 单击根条目会将您带到不同的地方 - 因此它在生活中有 2 个目的：link 到某个位置并成为下拉菜单的悬停触发器。
并非所有根元素都有子菜单。
有一个单独的移动菜单，基于宽度媒体查询，但平板电脑（尤其是横向模式）以桌面样式显示，它给了我 gyp！

在平板电脑上（在 Safari iOS 和 Chrome 中 iPad 中测试）浏览器有一些深奥的魔力！...

对于没有下拉列表的元素，单击它们会带您到 link.
对于确实有下拉子菜单的元素，则
- 第一次点击具有激活悬停的效果 - 它不会激活 link 但会显示菜单。
- 第二次点击激活 link。

可爱！

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

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

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

将点击事件放在 body 上（这样它就会被冒泡触发）不起作用（点击事件不会被触发。）

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

有什么想法吗？求助！

Answer 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
    }
});

Answer 2

而不是依靠 'mobile browser magic' 我会自己实现它。没有 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/

Answer 3

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

使用 "cover sheet" 方法，但 sheet 在折叠菜单的同时折叠自身。

您只需轻按 1 次，您就无法与基础页面进行交互 - 并且该轻按会明显折叠菜单，因此用户将收到重试提示。

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

Make menu dissappear on clickoff on tablet

javascript

click

hover

angularjs

drop-down-menu