1

我是 jQuery 新手，不知道如何解决我遇到的这个 jQuery 下拉问题。

当您将鼠标悬停在其中一个链接上时，下拉菜单可以正常工作，但是我在导航中添加了第二个下拉菜单，现在当您将鼠标悬停在其中一个链接上时，两个下拉菜单都会显示。我只希望显示当前的下拉菜单。

这是我的代码，以及 jsfiddle http://jsfiddle.net/K2Zzh/1/的链接...

$('.dropdown ul').hide();   
$('.dropdown').hover(function(){
    $('.dropdown ul').stop().slideDown(500);
    },function(){
    $('.dropdown ul').stop().slideUp(200);
});

我知道它为什么在做它正在做的事情，我知道我应该在this某个地方使用，但我不确定在哪里。

4

4 回答 4

2

您可以使用$(selector, context)或find方法。

$('.dropdown ul').hide();    
$('.dropdown').hover(function(){
    $('ul', this).stop().slideToggle(500);
});

http://jsfiddle.net/JKG5N/

于 2012-12-16T17:10:55.613 回答
1

您需要为下拉悬停功能添加上下文。事件处理程序发生在被悬停的元素的上下文中，所以如果你说它$('ul', this).stop().slideDown(500)应该$('ul', this).stop().slideUp(200)工作。

修改后的jsFiddle：http: //jsfiddle.net/7zbGH/1/

于 2012-12-16T17:11:14.650 回答
1

调整您的代码，如下所示：

$('.dropdown ul').hide();    

$('.dropdown').hover(function(){
      $(this).children('ul').stop().slideDown(500);
    },function(){
      $(this).children('ul').stop().slideUp(200);
});

JS小提琴

于 2012-12-16T17:11:58.167 回答
1

您只需定位相关列表，类似于以下内容：

var $dropdown;

$('.dropdown ul').hide();
$('.dropdown').hover(function() {
    $dropdown = $(this).find('ul');
    $dropdown.stop().slideDown(500);
}, function() {
    $dropdown.stop().slideUp(200);
});​

演示

我在上面使用变量的唯一原因是你不必为同一个下拉菜单遍历两次，这是一个很好的习惯。

你当然也可以这样做：

$('.dropdown ul').hide();
$('.dropdown').hover(function() {
    $(this).find('ul').stop().slideDown(500);
}, function() {
    $(this).find('ul').stop().slideUp(200);
});​

另外，我使用find()而不是children()的原因是因为children()只能沿着 DOM 树向下移动一个级别，而find()可以向下遍历多个级别来选择后代元素。

在您的特定情况下childrend()，尽管您只下降了 1 级，但似乎绝对没问题。

编辑
为了完整起见，如果您想在单个悬停功能中使用slideToggle()，您可以按照另一个答案中的说明进行操作：

$('.dropdown').hover(function() {
    $(this).find('ul').stop(true, true).slideToggle(500);
}

请注意，在使用此选项时，您可能需要true, true在stop()调用中包含以防止滑动菜单lagging发生反转并可能发生反转。

  • clearQueue一个布尔值，指示是否也删除排队的动画。默认为假。
  • jumpToEnd 一个布尔值，指示是否立即完成当前动画。默认为假。
于 2012-12-16T17:12:04.247 回答