悬停或单击时激活 JQuery 菜单

Question

我的目标是动画 JQuery 菜单以在悬停或单击时做出响应。使用 HoverIntent 插件，以下代码可以按预期悬停。但是如何在保持用户友好的菜单的同时添加点击事件呢？在计划如何编写此内容时，我考虑过在单击菜单项时向悬停事件添加延迟，但我不确定该实现的实用性。如何将点击事件添加到以下代码中？

<script type="text/javascript">
$(document).ready(function() {

function show() {
 var menu = $(this);
 menu.children(".options").slideDown();
}

function hide() { 
 var menu = $(this);
 menu.children(".options").slideUp();
}

$(".menuHeader").hoverIntent({
 sensitivity: 3, 
 interval: 50,   
 over: show,     
 timeout: 300,  
 out: hide       
  });

});

<div id="SideMenu">
  <div id="aMenu" class="menuHeader">
   <h2>Menu A</h2>
    <ul class="options" >
      <li><a href="">Option a1</a></li>
      <li><a href="">Option a2</a></li>
      <li><a href="">Option a3</a></li>
    </ul>
  </div>
  <div id="bMenu" class="menuHeader">
   <h2>Menu B</h2>
    <ul class="options" >
      <li><a href="">Option b1</a></li>
      <li><a href="">Option b2</a></li>
      <li><a href="">Option b3</a></li>
    </ul>
  </div>
  <div id="cMenu" class="menuHeader">
    <h2>Menu C</h2>
     <ul class="options" >
      <li><a href="">Option c1</a></li>
      <li><a href="">Option c2</a></li>
      <li><a href="">Option c3</a></li>
     </ul> 
  </div>
</div>

对于代码的格式感到抱歉，感谢您的帮助。

Answer 1

我从来没有使用过hoverIntent，有什么办法可以解除绑定吗？

如果有的话，你可以这样做：

$(",menuHeader").bind("click.show_menu", function() {
  show();
  //unbind over from hoverIntent
})

function hide() { 
  var menu = $(this);
  menu.children(".options").slideUp(function() {
    //rebind over from hoverIntent on callback from slideUp
  });
}

所以你点击了一个链接，它会堆叠起来，直到你鼠标移开，然后当你再次悬停它或点击它时，它会再次堆叠。

编辑：
您还需要从hoverIntent中取消绑定click on函数，否则当您单击链接时会产生奇怪的效果。