Question

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

我在桌面样式下查看了一个包含下拉子菜单和子子菜单的页眉菜单。
在PC上，子菜单显示在悬停状态，单击该条目会将您带到某处。
- 点击根条目会带给你不同的地方 - 所以它有两个目的：成为一个位置的链接，并成为下拉菜单的悬停触发器。
并非所有根元素都有子菜单。
有一个单独的移动菜单，基于宽度媒体查询，但平板电脑（特别是横向模式）以桌面样式显示，它给了我gyp！

在平板电脑上（在Safari iOS和Chrome for iPad中测试），浏览器会做一些深刻的魔术！...

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

可爱！

问题是......如果你点按它们，菜单就不会消失。

点击页面一般不会做任何事情（没有点击事件引发）
点击可点击的页面上的内容清除菜单，并为您点击的任何内容调用点击操作。

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

将click事件放在body上（以便它被冒泡启动）不起作用（click事件就不会被触发。）

我尝试添加ngTouch，这确实会导致点击事件在任何地方被触发，但也会打破子菜单打开的行为 - 所有链接都会无法触发，您无法访问子菜单。

有什么想法吗？救命啊！

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

而不是依赖于移动浏览器魔术＆＃39;我会自己实现它。没有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

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

使用＆＃34;封面＆＃34;方法，但在折叠菜单的同时让工作表自行折叠。

您只能轻轻点击一下与基础网页进行互动 - 并且该点击会明显地折叠菜单，因此用户会有提示再试一次。

平板电脑

3 个答案: