如何“悬停效果”转换为jQuery的“点击效应”？

Question

我知道这听起来但有可能更改点击使用jQuery悬停效果？

我有这个site，如果你看一下菜单（E-rowery，特别是），你可以看到，它适用于胡佛。不幸的是，非触摸屏设备使用hoover，所以我想将它转换为点击菜单而不是hoover。任何想法如何用jQuery做到这一点？

Answer 1

实际上，是没有问题的，因为这有子菜单中的链接无处可去（而不是他们去什么地方，你不能打开一个点击子菜单）。你可以轻松地将它们转换为点击。

但是，你必须要注意，你需要为“鼠标移开”的替代品。您可以通过向主体添加事件处理程序来完成此操作。用户可以点击菜单外的任何空白区域关闭子菜单。要做到这一点，正文中的处理程序必须检查单击的元素是否是菜单中的链接。如果没有，关闭所有菜单（如果它是菜单以外的其他链接，请转到该菜单）。

您可以使用添加处理程序，以父为子jQuery的.on()方法。

---

DEMO

click anywhere in the body 
<ul class="menu"> 
    <li> 
     <a href="#">click me, i am inside, i have a submenu</a> 
    </li> 
</ul> 
<a class="outside" href="#">i am outside with no submenu, you can redirect</a> 

$('body').on('click', function() { 
    alert('body clicked, close menus'); 
}); 

$('.menu a').on('click', function() { 
    alert('link clicked, open my submenu'); 
    return false; //prevent further code execution, prevent body's handler 
}); 

$('a.outside').on('click', function() { 
    alert('outside link clicked, go to page'); 
    return false; //prevent further code execution, prevent body's handler 
});