Question

我试图让Jquery Selectmenu plugin在鼠标悬停时展开，但在我离开时再次关闭。

我决定使用MouseOver和MouseOut事件以及open和close命令。

问题在于它是如何工作的。它似乎在div之外创建了某种假菜单，所以当我移动选项时，菜单会再次关闭。

我在JsFiddle中复制了这个：http://jsfiddle.net/jc2bs/

我希望能够让它发挥作用。

如果我mouseout激活mouseover，如果它被{{1}}激活，我也很乐意，但如果它被点击激活则没有，因此如果用户点击菜单会保持开放，直到他选择一个选项或点击外面）。但我想这是一个难以解决的问题。

Answer 1

对于第一个（子）问题，您可以使用下面的解决方案。这对我来说很好：

$("body").on("mouseenter", "#sel-button", function() {
    $('#sel').selectmenu('open');
});

$("body").on("mouseleave", "#sel-button, #sel-menu", function() {
    if (!$('#sel-menu').is(':hover')) {
        $('#sel').selectmenu('close');
    }
});

所以，我做了什么。首先，我使用新的delegate方法更改了已弃用的on方法。然后，我使用mouseenter和mouseleave个事件代替mouseover和mouseout（您可以查看in the docs为什么）。请注意，子菜单具有ID（#sel-menu），该ID是通过将select元素ID与"-menu"连接而创建的。同样适用于选择按钮。

DEMO： http://jsfiddle.net/jc2bs/6/

关于第二个（子）问题，我们可以使用几个技巧。一个是在点击菜单时使用data来存储标记，并根据此决定是否在鼠标离开时隐藏子菜单。

DEMO： http://jsfiddle.net/jc2bs/7/

Answer 2

您可以使用selectmenu本身的mouseleave事件关闭菜单来完成此操作。

$('.ui-selectmenu-menu').on('mouseleave', function() {
    $('#sel').selectmenu('close');
});

直播：http://jsfiddle.net/5wExe/1

虽然你的第二个要求在理论上是可行的，但我个人认为这不是一个好主意。如果菜单显示onmouseover，则用户不会想要点击该菜单。

无法让mouseout在jquery Selectmenu上正常工作

2 个答案: