jQuery UI菜單模糊摺疊

我認爲這是討厭的jQuery UI子菜單保持打開mouseblur事件。（請參閱http://api.jqueryui.com/menu的底部。）jQuery UI菜單模糊摺疊

我一直在玩弄如何在blur事件之後的一段時間後崩潰菜單，但沒有得到很好的解決方案。

menublur事件在每個菜單和菜單項模糊處都會觸發。
爲每個子菜單創建自定義blur事件是非常糟糕的。

我還能做什麼？ jQuery UI菜單看起來不完整，沒有經過深思熟慮。

2012-12-08 dwieeb

我的策略是在每個menublur事件上創建一個定時器，並在觸發menufocus事件時重置該事件。如果我們打開了一個子菜單，並且從整個菜單中移出鼠標，則最後一個事件將爲menublur，因此經過預定義的時間後，我們可以摺疊菜單。

HTML：

<ul id="menu"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a> 
     <ul> 
      <li><a href="#">Item 3-1</a></li> 
      <li><a href="#">Item 3-2</a></li> 
      <li><a href="#">Item 3-3</a></li> 
      <li><a href="#">Item 3-4</a></li> 
      <li><a href="#">Item 3-5</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
</ul>

的JavaScript：

$(document).ready(function() { 
    var menu = $('#menu'); 
    menu.menu(); 

    var blurTimer; 
    var blurTimeAbandoned = 200; // time in ms for when menu is consider no longer in focus 

    menu.on('menufocus', function() { 
     clearTimeout(blurTimer); 
    }); 

    menu.on('menublur', function(event) { 
     blurTimer = setTimeout(function() { 
      menu.menu("collapseAll", null, true); 
     }, blurTimeAbandoned); 
    }); 
});

演示：jsfiddle

參考：setTimeout，clearTimeout

來源

2012-12-08 07:42:48 Cymen

這偉大工程！不過，我確實有一個問題。當[timer設置爲0]（http://jsfiddle.net/cR4EK/1/）時怎麼還有延遲？ – dwieeb

在Chrome瀏覽器上，設置「setTimeout」時間和「clearTimeout」時間似乎稍有延遲。如果0工作，它會是這樣[jsfiddle]（http://jsfiddle.net/cR4EK/2/），這當然是非常糟糕的用戶界面。您可能需要200毫秒或更多毫秒才能獲得良好的用戶體驗。 – Cymen

是的，我知道。我只是好奇而已。謝謝！ – dwieeb

jQuery UI菜單模糊摺疊

回答

相關問題