Question

我几天前开始学习jQuery，似乎我有问题。我正在使用jquery来＆＃34;切换＆＃34;只有下一个＆＃34; li＆＃34;悬停时的元素，但当我将鼠标悬停时，它会将它们全部切换。有什么建议吗？

HTML

<div class="A1">
<ul >zeljezo
    <li><a href="#">aa</a></li>
</ul>
<ul>zeljezo
    <li><a href="#">aa</a></li>
</ul>
</div>

的jQuery

$(document).ready(function() {
    $(".A1 ul li").hide();
    $(".A1 ul").hover(function() {
    $(".A1 ul").find("li").slideToggle("fast");
 }); 
});

here

Answer 1

尝试使用悬停功能中的this引用来定位当前悬停元素，

$(".A1 ul").hover(function() {
   $(this).find("li").stop(true).slideToggle("fast");
});

DEMO

作为旁注，请在使用.stop()

开始新动画之前清除动画队列

Answer 2

尝试使用$（this）

http://jsfiddle.net/tm43Y/3/

$(this).find("li").slideToggle("fast");

Answer 3

首先，您必须编写正确的html以避免跨浏览器问题或html错误。 http://jsfiddle.net/h6cFR/

$(document).ready(function() {
    $(".A1 ul li a").hide();
    $(".A1 ul li").hover(function() {
    $(this).find("a").stop().slideToggle("fast");
  }); 
});

用css修正html代码：

<style>
.A1 li a {
    display:block;
}
</style>

<div class="A1">
        <ul >
            <li>zeljezo
    <a href="#">aa</a></li>
        </ul>
        <ul>
            <li>zeljezo<a href="#">aa</a></li>
        </ul>
    </div>

使用jquery </li>仅显示下一个<li>元素

3 个答案:

DEMO