0

我试图让我的菜单在行之间显示一个隐藏的菜单。我不想要一个纯 CSS 菜单。请我意识到这可以用更少的标记来完成，而且它缺少很多。这只是剪切和粘贴，重新创建。

这是html：

   <nav>
<div class="navigation_toplevel">
    <a href="Index"><h4>Home</h4></a>
</div>

<div class="navigation_toplevel has_sub">
    <a href="Index"><h4>Home</h4></a>
</div>
<div class="navigation_bottomlevel">
    <ul>
        <li>Preferences</li>
        <li>Preferences</li>
        <li>Preferences</li>
    </ul>
</div>
<div class="navigation_toplevel has_sub">
    <a href="Index"><h4>Home</h4></a>
</div>
<div class="navigation_bottomlevel">
    <ul>
        <li>Preferences</li>
        <li>Preferences</li>
        <li>Preferences</li>
    </ul>
</div>
<div class="navigation_toplevel has_sub">
    <a href="Index"><h4>Home</h4></a>
</div>
<div class="navigation_bottomlevel">
    <ul>
        <li>Preferences</li>
        <li>Preferences</li>
        <li>Preferences</li>
    </ul>
</div>
<div class="navigation_toplevel has_sub">
    <a href="Index"><h4>Home</h4></a>
</div>
<div class="navigation_bottomlevel">
    <ul>
        <li>Preferences</li>
        <li>Preferences</li>
        <li>Preferences</li>
    </ul>
</div>
<div class="navigation_toplevel has_sub">
    <a href="Index"><h4>Home</h4></a>
</div>
<div class="navigation_bottomlevel">
    <ul>
        <li>Preferences</li>
        <li>Preferences</li>
        <li>Preferences</li>
    </ul>
</div>
</nav>

我这样设置是因为这个菜单需要完全流畅（如果窗口很小，每行可能有 1,2 或 3 个链接），并且能够在下方水平显示子菜单，填充导航容器。

我的jQuery：

<script>
$(document).ready(function () {


    if ($(".navigation_toplevel").hasClass("has_sub")) {
        $(this).hover(function () {
            $(".navigation_toplevel").nextAll("div:first").toggleClass("show_sub");
        });
            }

            else { }
      });

</script>

我在这里做错了什么？

4

1 回答 1

0

好吧，$(".navigation_toplevel")返回一个集合。当您按类名获取元素时，使用集合的正确方法是$(".navigation_toplevel").each(function(){ do something with a single element }). 但在你的情况下，我认为你需要这样的代码：$(".navigation_toplevel.has_sub").hover(mouseInHandler, mouseOutHandler)

于 2013-09-23T19:39:47.487 回答