javascript - 手机上的菜单在不应该触发的时候触发

Question

基本上，我有一个 div 元素，里面有一个图像，将鼠标悬停在它上面时会显示另一个 div，并带有一些可点击的选项。这一切在 PC 上都能完美运行，您实际上可以将鼠标悬停在元素上，但在手机上悬停是不可能的，您必须按下图像才能显示菜单。问题是，如果我点击要显示的菜单图像，它会自动触发菜单中的选项，而不是仅仅显示它并需要再次点击选项。

How the div looks

有没有办法用 html/css 解决这个问题，如果没有，有没有使用 js 的解决方案？

谢谢。

Answer 1

好的 - 你可以做的是:

• 将选项包装在一个 div 中，使其成为 display:none至少对于移动视口(viewport)媒体而言
• window.outerWidth <= 768在需要点击以显示选项的图像或 div 上添加点击事件，并在该点击事件上显示选项包装器 div
• 我不确定，但这可能适用于 :active和 :focus像这样的 css 事件 .parent:focus .optionsWrapper, .parent:active .optionsWrapper{display: block;}

• 无论如何，您也可以使用 display: none而不是 opactity:0

  解释

• opacity:0只是隐藏元素但它仍然存在

• display:none意味着该元素不存在(简单来说)-确保您可以通过 javascript 访问它，但不能通过用户直接操作(如单击或悬停)访问它