jquery中下拉子菜单的问题答案

【问题标题】：Trouble with dropdown submenus in jqueryjquery中下拉子菜单的问题
【发布时间】：2014-02-11 14:58:43
【问题描述】：

我正在使用 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");
    })
});

【问题讨论】：

默认他们应该被扩展？
你也许可以在这里摆脱this。 `$(this).slideDown("medium");
你知道hover已经死了吗？您的所有移动用户都无法使用此菜单。
@cpburnz 感谢您整理我的代码，但这并没有真正帮助我。 :)
@Rahil Wazir 当我将鼠标悬停在一个上时，那个应该展开

标签： jquery

【解决方案1】：

您需要在$(this) 中搜索.submenu，find() 方法将为您完成此操作。只要.submenu 是this() 的直接子代，children() 也适用于您的情况。另一方面，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");
    });
});

我在你的 fiddle 中尝试过，它成功了，你可能想取消注释该行 $(".submenu").slideUp("medium"); 以便所有菜单开始关闭。

【讨论】：

我认为用这样的 JS 隐藏 .submenu 并不理想。页面加载时可能会导致可见菜单闪烁。
谢谢。如果你添加一个小提琴，它总是会更受欢迎。

【解决方案2】：

使用.find() 方法，并将您的.submenu 设置为display: none，这样一开始它是隐藏的：

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

见DEMO。

【讨论】：

在这种情况下find 是否优于children？我在回答中说children，但find 可能更有效或更好地处理某些情况。

【解决方案3】：

可能有更好的方法可以做到这一点，但只要对您的代码进行最小的更改，以下应该可以工作：

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

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

【讨论】：

再问一个问题。既然我在菜单下面有内容，我如何让这些内容忽略掉在它们上面的子菜单？

【解决方案4】：

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

$(".submenu", this)

这应该为你做。另外，在你的 CSS 中，你需要有 .submenu { display: none; }

【讨论】：

您的评论包含与您在上面阅读的答案不同的语法:)
同意。我使用 cmets 让 OP 开始思考。我使用答案来实际解决问题。
我回复了你的评论：（哦？请看下面。）

【解决方案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;
}

【讨论】：