jQuery中下拉菜单子菜单出现问题

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");
    })
});

- Esser

---

默认情况下它们应该是展开的吗？ - Rahil Wazir

你知道 hover 已经过时了吗？你的移动用户将无法使用此菜单。 - isherwood

@cpburnz 感谢您整理我的代码，但那并没有真正帮到我。 :) - Esser

@Mallanaga 那样做行不通！ - Rahil Wazir

哦？请看下面，请。 - Dudo

Answer 1

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

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

请参见DEMO。

- zxqx

---

在这种情况下，使用 find 比 children 更好吗？我在我的回答中说了 children，但使用 find 可能更有效或处理某些情况更好。 - akousmata

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/

- akousmata

---

只有一个问题。由于我在菜单下面有内容，我该如何使得该内容忽略下拉的子菜单呢？ - Esser

Answer 3

你需要在$(this)内部搜索.submenu，方法find()将为您完成此操作。在您的情况下，children()也可以正常工作，只要.submenu是this()的直接子级即可。 另一方面，find()在所有后代（即子项、孙子项等）中搜索。根据jQuery中children()和find()哪个更快？，两个函数在速度方面没有太大差异。

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

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

我在你的 Fiddle 上尝试了这个，它可以工作。你可能想取消注释那一行 $(".submenu").slideUp("medium"); 以便所有的菜单都是关闭状态。

- Mohamed Khamis

---

我认为用JS隐藏.submenu并不理想。这很可能会在页面加载时导致可见菜单的闪烁。 - zxqx

谢谢。如果您添加一个fiddle，它将会更受欢迎。 - Esser

Answer 4

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

$(".submenu", this)

这样就可以了。另外，在你的CSS中，你需要有.submenu { display: none; }

- Dudo

---

你的评论中的语法与上面阅读的答案不同 :) - Rahil Wazir

同意。我使用注释来让原帖作者开始思考。我使用答案来真正解决问题。 - Dudo

我回复了你的评论：（哦？请看下面。） - Rahil Wazir

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;
}

- Kyle Needham