Question

我有一个JS + CSS菜单，在鼠标悬停时效果很好，但我必须使它也适用于点击触控设备。

菜单是这样的：

<div id="menucontainer">
  <ul id="jsddm">              
    <li class="topmenu"><a href="#">Main Menu</a>
      <ul style="visibility: hidden;">
          <li><a href="http://www.google.com">Google</a></li>
          <li><a href="http://www.apple.com">Apple</a></li>
          <li><a href="http://www.microsoft.com">Microsoft</a></li>
      </ul>
    </li>        
  </ul>
</div>

和JS：

$(document).ready(function () {
    $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout', jsddm_timer);

    // this work, but the submenus dont click
    $('.topmenu').bind('click', jsddm_open);
});

尝试了不同的方法但没有成功

这里的工作示例： http://jsfiddle.net/xjuZ4/

Answer 1

将点击处理程序放在<a>标记上。通过将点击处理程序置于顶级<li>标记，您可以拦截对子<li>标记的所有点击，因为点击子<li>标记也会点击父{{1}标签。

您需要在<li>标记的点击处理程序中添加e.stopPropagation();，以阻止鼠标悬停。

在触发<a>方法时，您也很可能希望使用JQuery方法.parent()来查找<li>所居住的<a>。

使用多个下拉菜单更新了JSFiddle。

Answer 2

在您的javascript中删除$('.topmenu').bind('click', jsddm_open);，因为您调用了标记<a>中的链接。

如何在悬停或单击时打开JS菜单

2 个答案: