Question

我正在使用jquery制作下拉子菜单，但是当我将鼠标悬停在任何主导航链接上时，所有子菜单都会下拉。我相信我需要对this()做一些事情，但我似乎无法正确理解语法。这是一个小提琴http://jsfiddle.net/xzN5G/

这是我的HTML

<nav id="nav">
    <ul class="nav">
        <li class="mainli"><a href="" class="selected">Home</a>
            <ul class="submenu">
                <li>s1111111</li>
                <li>a2222222</li>
                <li>g3333333</li>
                <li>y4444444</li>
            </ul>
        </li>    
        <li class="mainli"><a href="album.html">My Photos</a>
            <ul class="submenu">
                <li>11111111</li>
                <li>22222222</li>
                <li>33333333</li>
                <li>44444444</li>
            </ul>
        </li>
        <li class="mainli"><a href="travel.html">My Travel</a>
            <ul class="submenu">
                <li>aaaaaaaaaa</li>
                <li>bbbbbbbbbb</li>
                <li>cccccccccc</li>
                <li>dddddddddd</li>
            </ul>
        </li>
        <li class="mainli"><a href="aboutwork.html">About Work</a>
            <ul class="submenu">
                <li>rgre1111</li>
                <li>estg22</li>
                <li>thser3333</li>
                <li>rtyr4444</li>
            </ul>
        </li>
        <li class="mainli"><a href="portfolio.html">My Portfolio</a>
            <ul class="submenu">
                <li>qqqqqqqq</li>
                <li>tttttttt</li>
                <li>ppppppppp</li>
                <li>yyyyyyyyyy</li>
            </ul>
        </li>
        <li class="mainli"><a href="contact.html">Contact Me</a>
            <ul class="submenu">
                <li>99999999</li>
                <li>88888888</li>
                <li>77777777</li>
                <li>66666666</li>
            </ul>
        </li>
    </ul>
</nav>

和我的jquery

$(document).ready(function(){
    $(".mainli").hover(function() {
        $(".submenu").slideDown("medium");
    }, function () {
        $(".submenu").slideUp("medium");
    })
});

Answer 1

使用.find()方法，将.submenu设置为display: none，使其首先隐藏：

$(document).ready(function() {
  $(".mainli").hover(function() {
    $(this).find(".submenu").slideDown("medium");
  },
  function() {
    $(this).find(".submenu").slideUp("medium");
  }
  );
});

请参阅DEMO。

Answer 2

可能有更好的方法来执行此操作，但只需对代码进行最少的更改，以下内容应该有效：

$(document).ready(function(){
    $('.submenu').slideUp();
    $(".mainli").hover(function() {
        $(this).children('.submenu').slideDown("medium");
    },
    function () {
        $(this).children('.submenu').slideUp("medium");
    });
});

http://jsfiddle.net/VAYxh/4/

Answer 3

您需要在.submenu内搜索$(this)，方法find()会为您执行此操作。只要children()是.submenu的直接子女，this()就会适用于您的情况。另一方面，find()在所有后代（也就是孩子，孙子等等）中进行搜索。

根据What is fastest children() or find() in jQuery?，两个函数之间的速度没有太大差异

$(document).ready(function () {
    // $(".submenu").slideUp("medium");
    $(".mainli").hover(function () {
        $(this).find(".submenu").slideDown("medium");
    },

    function () {
        $(this).find(".submenu").slideUp("medium");
    });
});

我在你的小提琴中尝试了这个并且它有效，你可能想要取消注释该行$(".submenu").slideUp("medium");，以便所有菜单都开始关闭。

Answer 4

http://jsfiddle.net/xzN5G/4/

$(".submenu", this)

那应该为你做。此外，在您的CSS中，您需要.submenu { display: none; }

Answer 5

我会默认隐藏子菜单，然后检查它们是否在悬停时隐藏，如果它们被隐藏然后将它们向下滑动，否则只需使用隐藏。

请参阅此fiddle。

更新了JS。

$(document).ready(function () {
    $(".mainli").hover(function () {
        var target = $(this).find('.submenu');
        if (target.is(':hidden')) {
            target.slideDown("medium");
        } else {
            target.hide();
        }
    });
});

添加了CSS

ul.submenu {
    float: right;
    display:none;
    overflow:hidden;
}

在jquery中下拉子菜单出现问题

5 个答案: