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

How do i select only one column when hovering over it in a drop down jQuery menu?

本文关键字：一列 选择 悬停 鼠标 菜单 jQuery      更新时间：2023-09-26

我需要一些帮助来了解如何在将鼠标悬停在下拉菜单上时仅选择一列。它可以工作，但所有子菜单项都向下滑动。我只想要我悬停在上面的那个，然后在悬停下一个时，前一个关闭，只有下一个保持打开状态。这是我的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>

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

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

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

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

您将看到的最大变化是在两行上 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

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

尝试使用这个：

            $('.menu .column .title').hover(function(){
                    $(this).next('.itemList').slideDown('slow');
            });
相关文章：