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

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>标签也会点击父<li>标签。

您需要添加e.stopPropagation();到<a>标签上的点击处理程序以阻止触发悬停。

您还很可能希望使用 JQuery 方法.parent()来查找触发该方法时所存在的<li>对象。<a>click

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

Answer 2

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