1

我有一个链接('#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');
});
4

3 回答 3

1

我会将您的链接和向下滑动的 div 放在一个容器中。然后使用容器的 mouseleave 事件向上滑动。

http://jsfiddle.net/Whrec/1

<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');
});
于 2012-02-09T04:03:09.150 回答
0

好吧，您可以通过仅使用mouseenterandmouseout事件来简化。还缓存$('.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();
});
于 2012-02-09T03:54:53.840 回答
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));
});

演示

于 2012-02-09T04:34:17.350 回答