Question

我想在悬停时滑下子菜单（并在mouseleave上滑动）。这段代码不起作用。当我只是说$(".content").slideDown时，两个子菜单都滑落，悬停在任何标题上。

JS：

$(document).Ready(function() {

$(".header").mouseover(function() {
  $(this).find(".content").slideDown("slow");

});
});

HTML：

<nav>
 <ul>
   <li class="header"><a href="#">People</a>
    <ul class="content">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
    </ul>
   </li>
   <li class="header"><a href="#">Animals</a>
    <ul class="content">
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 2</a></li>
    </ul>
   </li>
 </ul>
</nav>

Answer 1

你有一个错字：

$(document).ready(function() { //<---No capital on ready

    $(".header").mouseover(function() {
        $(this).find(".content").slideDown("slow");

    });
});

Answer 2

请看这个小提琴：

http://jsfiddle.net/vN44B/1/

$(document).ready(function () {
 $(".header").hover(function () {
    $(this).find(".content").slideDown("slow");
 }, function () {
    $(this).find(".content").slideUp("slow");
 });
});

Answer 3

您使用的是$(document).Ready()而不是$(document).ready()。

请找到工作小提琴here

此外，它使用jquery的 hover() 处理程序

Answer 4

检查这个小提琴：jsfiddle

css解决方案

nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{display:none;}
.header:hover > .content{display:block;}

如何使用JQuery为子UL使用SlideDown

4 个答案: