我有一个链接('#login_display')
,可以在点击时滑下子菜单'('。box_login')`。我想要的是当有人鼠标拖出链接或子菜单时,子菜单会滑回来。
此代码正常运行,但是有更好的方法吗?因为当鼠标离开子菜单('。box_login')进入链接('#login_display')时,滞后一点点因为链接打开了子菜单('。box_login')并且鼠标关闭它...
谢谢
这是脚本:
$('#login_display').hover(function() {
$('.box_login').slideDown('normal');
}, function() {});
$('.box_login').hover(function() {}, function() {
$('.box_login').slideUp('normal');
});
答案 0 :(得分:1)
我会将您的链接和滑动div放在容器中。然后使用容器的mouseleave事件向上滑动。
<a class="login" id="login_display">Link</a><br/>
<div class="box_login login">blah</div>
$('#login_display').mouseenter(function() {
$('.box_login').slideDown('normal');
});
$('.box_login, #login_display').mouseleave(function(e) {
console.log(e.toElement);
if (!$(e.toElement).hasClass('login'))
$('.box_login').slideUp('normal');
});
答案 1 :(得分:0)
嗯,您可以仅使用mouseenter
和mouseout
事件进行简化。同时缓存$('.box_login')
。然后使用$(this)
而不是重复$('.box_login')
,最后删除'normal'
,因为它是默认速度。你的表现会有所改善,但我不认为除此之外你还可以做很多事情。发布您的HTML可能有助于提高性能。
var $boxLogin = $('.box_login'); // Cache for speed
$('#login_display').mouseenter(function(){
$boxLogin.slideDown();
});
$boxLogin.mouseout(function(){
$(this).slideUp();
});
答案 2 :(得分:0)
查看您的网站,这将是最适合您的。试试这个。
$('#login_display').hover(function() {
clearTimeout($(this).data('mouseovertimer'));
clearTimeout($('.box_login').data('mouseovertimer'));
$('.box_login').slideDown('normal');
}, function() {
var $this = $(this);
$this.data('mouseovertimer', setTimeout(function(){
$('.box_login').slideUp('normal');
}, 100));
});
$('.box_login').hover(function() {
clearTimeout($('#login_display').data('mouseovertimer'));
}, function(){
var $this = $(this);
$this.data('mouseovertimer', setTimeout(function(){
$this.slideUp('normal');
}, 100));
});
<强> Demo 强>