gpt4 book ai didi

javascript - 导航下拉菜单不适用于超时

转载 作者:行者123 更新时间:2023-11-30 17:55:26 25 4
gpt4 key购买 nike

所以 jQuery 和 setTimeOut 正在躲避我!我呼吁 Stack 社区的善良本质寻求帮助。

我正在创建一个定制的下拉导航,并且在对脚本实现 setTimeOut 时遇到了一些问题,以便菜单在其响应中超时。

我将详细介绍超时。

菜单需要在 mouseenter 上暂停,这样用户就可以不小心将鼠标悬停在链接上而不会触发下拉菜单;目前设置为 400 毫秒。我还想要一个超时,允许用户 mouseleave 下拉菜单并有 1000 毫秒的时间在下拉菜单隐藏之前悬停回到下拉菜单。

需要注意的是,设置超时会阻止下拉菜单在不闪烁的情况下在下拉菜单之间无缝切换。

如果一个下拉菜单是可见的,并且用户将鼠标移动到另一个顶级链接(父链接,即“服务”),则下拉菜单(其容器)的视觉效果会显示,并且只有下拉菜单中的数据会发生变化。

我希望这涵盖了脚本的要求,如果没有请让我详细说明。

JSfiddle 链接: http://jsfiddle.net/ATqqv/8/

对于无法访问 JSfiddle 站点的纯粹主义者或偷窥者,这里是我的 JS 代码。

function responsive_navigation() {
var hover, $this;

$target = $("header nav > ul > li");

$target.on('mouseenter click', function (e) {
$this = $(this);

if(hover) {
clearTimeout(hover); // Cancel the timeout to hide the menu
hover = null;
}

hover = setTimeout(nav_show, 400);

}).on('mouseleave', function () {
//clearTimeout(hover);
//hover = setTimeout(nav_hide, 1000);
nav_hide();
});

// Show the menu relative to user actions
function nav_show() {
$this.addClass('active');
$this.children('.dropnav').show();
}
// Hide the menu relative to user actions
function nav_hide() {
$this.children('.dropnav').hide();
$this.removeClass('active');
}
}

$(document).ready(function () {
responsive_navigation();
});

提前感谢您提供的所有帮助和对答案的贡献。

最佳答案

http://jsfiddle.net/DA4cv/8/

function responsive_navigation() {

var menuItems = $('header nav > ul > li');
var dropDowns = $('.dropnav');
var showTimer = null;
var hideTimer = null;

// hover over nav li
menuItems.on('mouseover click', function(){

clearTimeout(showTimer);
clearTimeout(hideTimer);

var mi = $(this);
showTimer = setTimeout(function(){nav_show(mi);}, 400);
menuItems.removeClass('active');
});

// end hover on nav li
menuItems.on('mouseleave', function(){

clearTimeout(hideTimer);

var mi = $(this);
hideTimer = setTimeout(function(){nav_hide(mi);}, 1000);
});

// hover over dropdown
dropDowns.on('mouseover', function(){
clearTimeout(hideTimer);
});

// end hover on dropdown
dropDowns.on('mouseleave', function(){
var dd = $(this);
hideTimer = setTimeout(function(){nav_hide(dd.parent());}, 1000);
});

// Show the menu relative to user actions
function nav_show(menuItem) {
dropDowns.hide();
$(menuItem).children('.dropnav').show();
$(menuItem).addClass('active');
}

// Hide the menu relative to user actions
function nav_hide(menuItem) {
menuItem.children('.dropnav').hide();
menuItem.removeClass('active');
}

}

$(document).ready(function () {
responsive_navigation();
});

关于javascript - 导航下拉菜单不适用于超时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18125085/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com