1

我被问到在 jquery 中编写这样的代码的最优雅的解决方案

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

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

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

我们也可以更改 HTML，但 3 按钮必须保留。

关于如何进行的任何建议？也许使用计时器？

预先感谢

4

2 回答 2

1

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

向弹出菜单本身添加一些弹出规则（并且它必须触摸按钮）（使用 div 包装使其透明并位于按钮上方） - 或使用超时功能关闭.choose

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

于 2012-09-20T18:19:17.173 回答
0

我对这样的 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 的mouseenterandmouseleave事件而不是mouseoverand mouseout; 这是因为mouseout当您将鼠标悬停在弹出窗口的其中一个子元素（如按钮）上时将被调用，并且弹出窗口将消失！

你有它。这是一个 jsFiddle 演示：http: //jsfiddle.net/z3PKm/15/

于 2012-09-20T18:51:18.330 回答