0

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

4

2 回答 2

0

让我们先简单回顾一下您的 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（如果您不确定thisJS/jQuery，您应该尝试找到一些关于它的好文章）。在这种特定情况下this，将始终是对悬停的特定列元素的引用。

回顾

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

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

于 2013-10-24T21:53:30.443 回答
0

尝试使用这个：

            $('.menu .column .title').hover(function(){
                    $(this).next('.itemList').slideDown('slow');
            });
于 2013-10-24T22:03:24.283 回答