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

How to make a JS menu open on hover OR on click

本文关键字：单击 悬停 何使 JS 菜单      更新时间：2023-09-26

我有一个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/

将点击处理程序放在<a>标记上。通过将点击处理程序放在顶级 <li> 标记上，您可以拦截对子<li>标记的任何单击，因为单击子<li>标记也会单击父<li>标记。

您需要在 <a> 标记上的单击处理程序中添加e.stopPropagation();，以阻止触发悬停。

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

更新了具有多个下拉菜单的 JSFiddle。

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

相关文章：