Javascript 在下拉jQuery菜单中将鼠标悬停在一列上时，如何仅选择一列？

当我将鼠标悬停在下拉菜单上时，我需要一些帮助来了解如何只选择一列。它可以工作，但所有子菜单项都会向下滑动。我只想让我悬停的那一个这样做，然后在悬停下一个时，上一个关闭，下一个保持打开。 这是我的HTML/CSS代码和JS。 谢谢

悬停下拉菜单
ul{列表样式：无；}
.itemList{填充：0；页边空白顶部：10px；}
.列{浮点：左；宽度：100px；边距：0自动；}
.menu.a列：悬停{颜色：红色；}
$（文档）.ready（函数（）{
$（'.menu.column.itemList li'）.hide（）；
$（'.menu.column.title'）。悬停（函数（）{
$（'.menu.column.itemList li'）.slideDown（'slow'）；
});
$（'.menu.column'）.mouseleave（函数（）{
$（'.menu.column.itemList li'）.slideUp（'slow'）；
});
});

---

让我们从简单回顾HTML结构开始。这里没有错，但这有助于解释问题

ul.menu
    li.column
        a.title
        ul.itemList
            li
    li.column
        a.title
        ul.itemList
            li
    ...

现在让我们看看我对代码所做的更改

首先，我将

悬停

选择器从

.menu.column.title

更改为

.menu.column

，我们本可以保留它，但删除它后代码变得更漂亮了。因此，将这一变化视为纯粹的装饰性变化。：）

您将看到的BIG更改位于带有

slideDown

和

slideUp

的两行。首先让我解释一下你的代码做了什么

$('.menu .column .itemList li').slideDown('slow');

无论何时使用

$（选择器）。something（）

jQuery将从树结构（即DOM）的顶部开始，并尝试查找任何匹配的元素。在你的情况下，它会发现很多。事实上，子菜单中的每个项都与此描述相匹配。这就是为什么每个菜单都显示出来

$(this).find('ul li').slideDown('slow');

通过将行更改为类似上面的内容，您可以在

this

处确定搜索的开始位置（如果您不确定

this

和JS/jQuery，您应该尝试查找一些关于它的好文章）。在这种特定情况下，

此

始终是对悬停在上面的特定列元素的引用

重述

$('selector').something(); //Starts a search for the selector at the document root
$(this).find('selector').something(); //Starts a search at "this" element

可以将其视为全局搜索与本地搜索

尝试使用以下方法：

            $('.menu .column .title').hover(function(){
                    $(this).next('.itemList').slideDown('slow');
            });

---

像是的，这就是我想要的，你能告诉我到底是什么问题吗？谢谢你的帮助。现在发布了答案。如果有任何不清楚的地方，请告诉我。感谢您的帮助和详细信息。必须在

li

元素上调用

slideDown

。因此，您必须将

children（）

添加到代码

$（this）.next（'.itemList'）.children（）.slideDown（'slow'）
            $('.menu .column .title').hover(function(){
                    $(this).next('.itemList').slideDown('slow');
            });