如何「懸停效果」轉換爲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 
});