1

对某些人来说，这听起来像是一个简单的问题，但我的编程技能虽然很热情，但几乎不存在。

我希望有人能提供帮助。

我正在尝试延迟以下垂直选项卡上的鼠标悬停事件，以便用户可以直接从选项卡 1 转到选项卡 4，而不会出现选项卡 2 和 3。

以下是我正在使用的脚本：

$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).mouseover(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');

$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
window.location.hash = $(this).attr('tab');
});
});

if (location.hash) {
    showTab(location.hash);
}
else {
    showTab("tab1");
}

function showTab(tab) {
    $("#v-nav ul li:[tab*=" + tab + "]").mouseover();
}

// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
    showTab(location.hash.replace("#", ""));
})

// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});

我在另一个 stackoverflow帖子中看到了类似的问题和解决方案，但无法弄清楚如何对其进行调整以使其工作。

可以在这里看到垂直选项卡的演示：http: //jsfiddle.net/JAG72/tt7CK/6/

提前感谢您的帮助。

4

1 回答 1

0

jsFiddle Demo

您需要做的是实现逻辑延迟。您可以通过检测您正在跟踪的元素上的鼠标移出来做到这一点。在这种情况下，列表元素。当鼠标移出时，提出一个标志，该标志将触发延迟。在鼠标悬停时，如果标志存在，则导致延迟。这需要对您的代码进行以下更改：

标志

var block = false;
var tabWait = -1;

鼠标悬停

$('#v-nav>ul>li').mouseout(function(){
   block = true;
   setTimeout(function(){ block = false; },400);
});

鼠标悬停编辑

var me = this;
if(block){
 clearTimeout(tabWait);
 tabWait = setTimeout(function(){
  $(me).mouseover();
 },400);
 return;
}

我将其设置为 400 毫秒的延迟。您可以将这两个地方的 400 更改为您认为最适合您的设计的任何时间范围。

于 2013-09-05T19:37:03.760 回答