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

【问题标题】：How do i select only one column when hovering over it in a drop down jQuery menu?将鼠标悬停在下拉 jQuery 菜单中时，如何仅选择一列？
【发布时间】：2013-10-24 21:14:03
【问题描述】：

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

<head>
    <title>Hover-Dropdown</title>
    <link rel="stylesheet" href="css/style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/jquery-1.10.2.js"></script>

    <style> 

    ul{list-style: none;}
    .itemList{padding: 0;margin-top: 10px;}
    .column{float: left;width: 100px;margin: 0 auto;}
    .menu .column a:hover{color:red;}
    </style>

    <script>

            $(document).ready(function(){
                $('.menu .column .itemList li').hide();
                    $('.menu .column .title').hover(function(){
                        $('.menu .column .itemList li').slideDown('slow');
                });
                    $('.menu .column').mouseleave(function(){
                        $('.menu .column .itemList li').slideUp('slow');
                });
            });

    </script>




</head>

<body>

    <ul class="menu">

        <li class="column">
            <a class="title" href="#">Title 1</a>

            <ul class="itemList">

                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </li>

        <li class="column">
            <a class="title" href="#">Title 2</a>

            <ul class="itemList">

                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </li>

        <li class="column">
            <a class="title" href="#">Title 3</a>

            <ul class="itemList">

                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </li>
    </ul>

</body>

【问题讨论】：

类似this?
是的，这就是我想要的，你能告诉我到底是什么问题吗？谢谢你的帮助。
现在发布了答案。如果有任何不清楚的地方，请告诉我。

标签： javascript jquery css drop-down-menu hover

【解决方案1】：

让我们先简单回顾一下您的 HTML 结构。这里没有错，但它有助于解释问题。

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

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

首先，我将hover 选择器从.menu .column .title 更改为.menu .column，我们本来可以保留它，但删除它后代码变得更漂亮了。因此，将这种变化视为纯粹的装饰。 :)

您将看到的BIG 变化位于slideDown 和slideUp 这两行。首先让我解释一下你的代码做了什么。

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

每当你使用$(selector).something() 时，jQuery 都会从你的 DOM 树结构的顶部开始，并尝试寻找任何匹配的元素。在你的情况下，它会找到很多。事实上，您的子菜单中的每个项目都与此描述相匹配。这就是显示每个菜单的原因。

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

通过将行更改为类似上面的内容，您可以将搜索的起始位置固定在this（如果您不确定this 和JS/jQuery，您应该尝试查找一些关于它的好文章）。在这种特定情况下，this 将始终是对悬停在其上的特定列元素的引用。

回顾

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

将其视为全局搜索与本地搜索。

【讨论】：

感谢您的帮助和详细信息。

【解决方案2】：

尝试使用这个：

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

【讨论】：

slideDown 必须在 li 元素上调用。因此，您必须将children() 添加到您的代码$(this).next('.itemList').children().slideDown('slow');