Question

我被问到在jquery

中编写类似代码的最优雅的解决方案

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

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

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

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

有关如何进行的任何建议？使用计时器可能吗？

提前感谢

Answer 1

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

向弹出菜单本身添加一些弹出式规则（并且必须触摸按钮）（使用div换行使其透明并位于按钮的上方） - 或者使用{的超时功能{1}}

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

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/

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

2 个答案: