jQuery的：隐藏触发或弹出

我已经出现在我页这样的一个元素的onclick事件弹出菜单的鼠标离开事件弹出...jQuery的：隐藏触发或弹出

$('.triggerDiv').click(function() { 
    var pos = $(this).offset(); 
    $('#popupDiv').css({ 
      "left": (pos.left + this.width()) + "px", 
      "top": pos.top + "px" 
     }).slideDown(); 
});

我也有连接到mouseLeave事件弹出以将其隐藏在mouseleave上。

$('#popupDiv').mouseleave(function() { 
    $('#popupDiv').slideUp(); 
});

如果鼠标离开触发器，我想要做的就是隐藏弹出窗口。简单的解决方案将是 -

$('.triggerDiv').mouseleave(function() { 
    $('#popupDiv').slideUp(); 
});

但问题是，我有多个触发元素在页面上都显示相同的弹出onclick。在这种情况下，我该如何正确处理mouseleave事件来隐藏/显示弹出窗口？

来源

2011-10-19 vikmalhotra

你只有一个ID为“popupDiv”的元素，多个元素如何触发它显示？ – iWantSimpleLife

@iWantSimpleLife - 在触发元素中单击事件我也使用绝对定位来显示触发器右侧的弹出菜单。 – vikmalhotra

@ShiVik你的代码看起来非常合理。你有什么问题吗？我唯一要改变的不是分别选择''＃popupDiv“'和'”.triggerDiv“'，我会同时使用''#popupDiv，.triggerDiv”'选择两种类型的元素' 。 – Xavi

为了保证在使用时的鼠标已经离开这两个弹出式和触发-DIV弹出只关闭，试试这个代码：

var closeTimer; 

$("#popupDiv, .triggerDiv") 
    .mouseleave(function() { 
     closeTimer = setTimeout(function() { 
      $('#popupDiv').slideUp(); 
     }, 300); 
    }) 
    .mouseenter(function() { 
     if(closeTimer) { closeTimer = clearTimeout(closeTimer); } 
    });

上面的代码使用setTimeout功能关闭弹出之前等待300毫秒。这给用户足够的时间将他们的鼠标从触发器移动到弹出窗口，反之亦然。请注意，当用户的鼠标进入弹出窗口时，代码可以通过使用clearTimeout来取消closeTimer来防止弹出窗口关闭。根据我的经验，这使弹出式菜单和悬停菜单更易于使用。

此外，如果有大量的.triggerDiv S，我会考虑使用live events。

来源

2011-10-19 06:10:51 Xavi

+1谢谢你。这解决了这个问题。 – vikmalhotra

使用在函数体中一个jQuery $(this)参考：

$('.triggerDiv').mouseleave(function() { 
    $(this).slideUp(); 
});

来源

2011-10-19 05:57:00 millhouse

我想隐藏（滑动）弹出式菜单而不是触发器元素本身。 – vikmalhotra

jQuery的：隐藏触发或弹出

回答

相关问题