在带有菜单的悬停弹出窗口中

Question

我被问及在jquery中编写类似代码的最优雅的解决方案

http://jsfiddle.net/lucaguglielmi/z3PKm/

当然，使用鼠标，您应该能够在弹出窗口上悬停并单击一个按钮。

优雅意味着干净的代码，具有良好的性能和最大的可用性，没有鼠标悬停/输出错误。用户应该有一段时间来返回弹出窗口，如果他鼠标悬停错误，并且没有其他插件，除了jquery。

我们也可以更改HTML，但3个按钮必须保持不变。

对于如何进行，有什么建议吗？也许用计时器？

提前感谢

Answer 1

http://jsfiddle.net/z3PKm/12/

向弹出菜单本身添加一些弹出规则(并且必须接触按钮)(使用div包装使其透明并位于按钮上方)-或者使用.choose的超时功能

我认为这是最简单的解决方案

Answer 2

我对这样的UX元素的经验是，它会导致用户的挫败感；因此，您可能希望完全重新考虑您的方法，以便有另一种方式来显示您的两个按钮，而不依赖于悬停在元素上。支持重构设计的另一个论点是，它不适用于平板电脑或手机等触摸式设备，因为没有“悬停”的概念。

然而，如果你真的想这样做，我认为使用计时器是最好的选择。Alex的解决方案通过移除按钮和容器之间的间隙来工作，但这也可能导致挫败感:例如，如果用户的鼠标位于按钮上，然后沿对角线向上移动到现在可见的容器，则首先越过背景，容器将消失。此外，从设计的角度来看，可能不希望消除这两个元素之间的视觉差距。

然而，仅仅使用setTimeout并非易事，因为如果你将鼠标悬停在按钮上，然后转到弹出窗口，如果你不够快地按下任何按钮，它仍然会消失。所以，当他们进入弹出窗口时，你也必须使用clearTimeout，当他们离开弹出窗口时，你可能会隐藏弹出窗口。所以，这是你需要的：

首先，声明一个变量来保存超时ID (为了简单起见，我使用了一个全局变量，但您可能希望在其中一个元素上使用一个属性)：

var hidePopupTimeoutId;

然后修改.choose事件，如下所示：

$(".choose").live("mouseover", function () {
    // no need to check if hidePopupTimeoutId is undefined; clearTimeout
    // will fail silently
    clearTimeout( hidePopupTimeoutId );
    $(".popup").show();
});


$(".choose").live("mouseout", function () {
    // we don't hide the popup immediately, but give the user a reasonable
    // amount of time to mouse over it
    hidePopupTimeoutId = setTimeout( function() {
        $(".popup").hide();
    },500);
});

请注意，我们必须清除mouseover事件的超时:否则，如果您将鼠标悬停在按钮上，鼠标移出，然后鼠标移回按钮上，它将消失，即使您的鼠标位于按钮上！

接下来，我们添加一些逻辑，以确保当鼠标悬停在弹出窗口上时，弹出窗口保持可见：

$(".popup").live("mouseenter", function() {
    clearTimeout( hidePopupTimeoutId );
});


$(".popup").live("mouseleave", function() {
    $(".popup").hide();
});​

请注意，我们使用的是jQuery的mouseenter和mouseleave事件，而不是mouseover和mouseout；这是因为当您将鼠标悬停在弹出窗口的某个子元素(如按钮)上时，将调用mouseout，弹出窗口将消失！

现在你就知道了。这是一个jsFiddle演示：http://jsfiddle.net/z3PKm/15/