我想要做的是创建一个下拉列表,当单击链接时该下拉列表会向下滑动,并根据单击的链接显示特定的隐藏 div。我希望它在单击另一个链接时在公开的下拉列表中的隐藏 div 之间优雅地切换。我们已经基本弄清楚了第一部分。我想弄清楚的是,当鼠标离开下拉菜单和菜单时,如何使下拉菜单在延迟后重新滑回,这样,如果您的鼠标仍然在菜单或下拉菜单上,而不仅仅是下拉菜单或菜单上,它就会保持打开状态。菜单。我下面的内容几乎可以工作。唯一缺少的是如何在返回菜单时保持下拉菜单打开。有什么建议吗?
所以我希望它的功能如下:
点击链接 - $("div").slideDown();
退出$("div")
- $("div").slideUp();
退出 $("div")
进入 $("div-2")
不要 $("div").slideUp();
退出 $("div-2")
返回 $("div")
不要 $("div").slideUp() ;
退出$("div-2")
- $("div").slideUp();
这是我迄今为止得到的带有 jQuery 的 javascript:
$('.dropdown-link > a').click(function() {
var link = this;
if ($(".navigation-dropdown").is(':hidden')) {
$(".navigation-dropdown").slideDown(1000, 'swing', function() {
switcher(link, $('#' + $(link).attr('data-panel-id')));
});
} else {
switcher(this, $('#' + $(this).attr('data-panel-id')))
};
$(".navigation-dropdown").mouseleave(function(event) {
$(".navigation-dropdown").slideUp(1000, 'swing');
$(".active-item").removeClass('active-item');
});
});
function switcher(link, panel) {
$(".panel").stop().hide();
$(".active-item").removeClass('active-item');
$(panel).fadeIn(200);
$(link).parent().addClass('active-item');
};
这是 fiddle :https://jsfiddle.net/OGZStudios/qdp42cph/9/
这是我迄今为止获得的更好概念的结果:http://woodlandbible.tk
最佳答案
这个怎么样:
function switcher(link,panel){
$(".panel").fadeOut(function() {
$(".active-item").removeClass('active-item');
$(panel).fadeIn(200);
$(link).parent().addClass('active-item');
});
};
这应该淡出所有打开的面板,当它们消失时,淡入新面板并修改您的链接。问题是当 jQuery 淡入淡出时手动检查可见性。它可以为您完成这一切!
关于较短的代码:您需要一种将每个链接绑定(bind)到每个面板的方法。现在,这些连接已硬编码在脚本中,但假设您为链接提供了带有相应面板 ID 的 data-panel-id
属性,您所有的 .click
处理程序减少为:
$('.panel').click(function(){
switcher(this,$('#' + $(this).attr('data-panel-id')))
});
编辑:使用 $(".panel").stop()
结束所有正在进行的动画。以下内容在 JSFiddle 中对我有用:
function switcher(link,panel){
$(".panel").stop().hide();
$(".active-item").removeClass('active-item');
$(panel).fadeIn(200);
$(link).parent().addClass('active-item');
};
关于javascript - 如果我将 mouseLeave() 转移到另一个特定的 div,如何防止带有 sliderDown() 的 div 和带有 mouseLeave() 触发器的 SlideUp() 触发?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37357063/