Question

我是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，但我不知道在哪里。

Answer 1

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

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

http://jsfiddle.net/JKG5N/

Answer 2

您需要在下拉悬停功能中添加上下文。事件处理程序发生在正在悬停的元素的上下文中，因此如果您说$('ul', this).stop().slideDown(500)和$('ul', this).stop().slideUp(200)它应该有效。

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

Answer 3

调整您的代码如下：

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

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

<强> JS Fiddle

Answer 4

您只需要定位相关列表，类似于：

var $dropdown;

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

DEMO

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

你当然也可以这样做：

$('.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); }

请注意，使用此选项时，您可能需要在stop()来电中加入true, true，以防止lagging的滑动菜单被反转。



clearQueueA 布尔值，指示是否删除排队的动画   好。默认为false。

jumpToEndA 布尔值，指示是否   立即完成当前动画。默认为false。

仅当当前按钮悬停时，jquery下拉列表

4 个答案:

DEMO