Javascript 在平板电脑上单击关闭时使菜单显示

在HTML、CSS和JS中工作（如果您认为这很重要，那么从技术角度来看）

• 我有一个标题菜单与下拉子菜单和子菜单时，在桌面风格查看
• 在电脑上，子菜单出现在鼠标悬停处，点击条目可以带你到某个地方。
  • 点击根条目会带你到不同的地方——因此它在生活中有两个目的：成为指向某个位置的链接，成为下拉菜单的悬停触发器
• 并非所有根元素都有子菜单
• 有一个单独的移动菜单，基于宽度媒体查询，但平板电脑（特别是在横向模式下）显示在桌面风格，它给了我gyp

在平板电脑上（在Safari iOS和Chrome for iPad上进行了测试），浏览器发挥了巨大的魔力

• 对于没有下拉列表的元素，单击这些元素可转到 链接
• 对于具有下拉子菜单的元素，则
  • 第一次单击具有激活悬停的效果-它不会激活链接，但会显示菜单
  • 然后，第二次单击将激活链接

可爱

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

• 点击页面通常不起任何作用（未引发单击事件）
• 点击页面上可单击的内容会清除菜单，并对您单击的内容调用单击操作

我的第一个想法是在整个页面的其余部分放置一个透明的div，在页面上方但在菜单下方，并绑定一个click事件以清除菜单。 但是，我无法同时单击透明层和底层页面

将click事件放在body上（这样它就会被气泡触发）不起作用（click事件只是没有被触发。）

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

---

有什么想法吗？救命啊

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

比如：

$('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
    }
});

---

与其依赖“移动浏览器魔术”，我宁愿自己实现它。没有角度体验，但在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'); 
});

还有一个简单的例子：

：叹气： 今天早上我和一位同事讨论了这个问题，他立即解决了这个问题：

使用“封面页”方法，但在折叠菜单的同时，让该页自行折叠

---

只需点击一次，您就失去了与基础页面交互的能力-点击会明显地折叠菜单，因此用户会有重试的提示。

请向我们显示您正在使用的实际代码，以便能够重现问题。这不起作用（之前的评论为false，我运行的代码已过期）-根据原始描述，未触发单击事件。