0

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

我决定将MouseOverandMouseOut事件与openandclose命令一起使用。

问题在于它是如何工作的。它似乎在 div 之外创建了某种假菜单，因此一旦我移过选项，菜单就会再次关闭。

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

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

此外，如果我能够在mouseout它被 a 激活时关闭它，mouseover但如果它被单击激活则不能关闭（因此，如果用户单击菜单，它将保持打开状态，直到他选择一个选项或单击外部）。但我想这是一个更难解决的场景。

4

2 回答 2

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（你可以在文档中查看原因）。考虑子菜单的 ID ( #sel-menu)，它是通过将select元素 ID 与"-menu". 选择按钮也是如此。

演示：http: //jsfiddle.net/jc2bs/6/

关于第二个（子）问题，我们可以使用几个技巧。如果单击菜单，则data用于存储标志，并基于此决定是否在鼠标离开时隐藏子菜单。

演示：http: //jsfiddle.net/jc2bs/7/

于 2012-05-22T16:28:32.217 回答
1

您可以通过使用mouseleaveselectmenu 本身上的事件来关闭菜单来完成此操作。

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

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

虽然您的第二个要求在理论上是可能的，但我个人认为这不是一个好主意。如果菜单出现，用户不会想点击它onmouseover。

于 2012-05-22T16:31:19.320 回答