使平板电脑上的点击功能使菜单消失 [英] Make menu dissappear on clickoff on tablet

问题描述

• 我有一个带有下拉子菜单的标题菜单 - 菜单和子子菜单。


• 在PC上，子菜单显示在悬停上，单击该条目可以让您进入某处。
  
  
  
  
  • 单击根条目可以让您处于不同的位置 - 因此它有两个目的：生成一个链接，并将其作为下拉列表的悬停触发器菜单
  
  


• 并非所有根元素都有子菜单。


• 菜单，基于宽度媒体查询，但平板电脑（特别是横向模式）显示在桌面风格，它给我gyp！

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

• 对于没有下拉菜单，然后点击它们，您可以将
  链接。


• 对于具有下拉子菜单的元素，则
  
  
  
  
  • 第一次点击有效果激活悬停 - 它不激活链接，但显示菜单。
  
  
  • 第二次点击然后激活链接。 / li>
    

可爱！

点标志是...如果你点击它们，菜单不会消失。

• 点击页面一般不做任何事情（没有点击 - 事件提升）


• 点击可点击页面上的某些东西清除菜单，并且还会调用点击操作。

我的第一个想法是将一个透明的div放在页面的整个页面的上方，但在菜单之下，并绑定一个清除菜单的点击事件。
但是，我无法获得透明层，底层页面都被点击。 看到这里我遇到的问题。

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

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

有什么想法吗？帮助！

解决方案

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

使用封面方法，但是在折叠菜单的同时会使表单崩溃。

您失去与基础页面进行交互的能力只有1次点击，而且该点击将会明显地折叠菜单，因此用户将有一个提示再次尝试。

Working in HTML, CSS and JS (technically Angular, if you think it's significant)

• I have a Header menu with dropdown sub-menus and sub-sub-menus when viewed in desktop style.
• On a PC the sub-menus appear on hover and clicking on the entry takes you somewhere.
  • Clicking on the root entry takes you somewhere different - so it has 2 purposes in life: be a link to a location AND be the hover trigger for the dropdown menu.
• Not all root elements have a sub-menu.
• There's a separate mobile menu, based on width media queries, but Tablets (especially in landscape mode) display in desktop style, and it's giving me gyp!

On tablets (tested in Safari iOS and in Chrome for iPad) the browser does some deep magic!...

• For elements that have No dropdown then clicking on them takes you to the link.
• For elements that DO have a dropdown sub-menu, then
  • the first click has the effect of activating the hover - it doesn't activate the link but does reveal the menu.
  • The second click then activates the link.

Lovely!

Problem is... the menus don't disappear if you tap off them.

• Tapping the page in general does nothing (no click-event raised)
• Tapping something on the page that is clickable DOES clear the menu, and also invokes the click action for whatever you clicked.

My first thought was to put a transparent div across the whole rest of the page, above the page but below the menu, and bind a click event that would clear the menu. But, I can't get the transparent layer AND the underlying page to both be clicked. See here for the problems I hit there.

Putting the click event on body (so that it gets triggered by bubble up) doesn't work (click event just isn't fired.)

I tried adding ngTouch, and that does cause click events to be triggered everywhere, but also breaks the behaviour of the sub-menus opening - all the links trigger immeidately and you can't reach the sub-menus.

Any thoughts at all? Help!

解决方案

:Sigh: A colleague I discussed this with this morning solved this instantly:

Use the "cover sheet" approach, but have the sheet collapse itself at the same time as collapse the menu.

You lose the ability to interact with the underlying page for only 1 tap - and that tap will visibly collapse the menu, so the user will have a prompt to try again.

这篇关于使平板电脑上的点击功能使菜单消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！