jQuery 选择这个子项

Question

<ul>
   <li class="hoverMe"><div class="secret">Haha</div></li>
   <li class="hoverMe"><div class="secret">Blabla</div></li>
   <li class="hoverMe"><div class="secret">Tada</div></li>
</ul>

Secred div 隐藏在 css 中：

.secret {
   display: none;
}

我想在悬停“hoverMe”后显示“hoverMe”的秘密子级（因此，当用户悬停第一个链接时，他会看到“哈哈”，第二个链接“Blabla”等）。

我尝试过这段代码不起作用，我一直在尝试用“child(ren)”等替换“next”，但没有什么想法吗？

 jQuery().ready(function() {

                jQuery('.hoverMe').hover(function(){
                    jQuery(this).next('.secret').Toggle();
                });
            });

奇怪的是 (this).children() 切换所有子项，但是。当我尝试使用 (this).children('.secret') 时，它没有做任何事情。

Answer 1

hover() 可以绑定两个处理程序：

$('.hoverMe').hover(function(){
  $(this).children().show();
}, function(){
  $(this).children().hide();
})

或者

$('.hoverMe').hover(function(){
  $(this).find('.secret').show();
}, function(){
  $(this).find('.secret').hide();
})

或者，如 @Felix Kling 请注意，它只能绑定一个句柄：

$('.hoverMe').hover(
  $(this).find('.secret').toggle();
)

Answer 2

当 .secret 未显示时，您的 .hoverme 是空的（高度为 0），因此没有任何可悬停的内容。

您需要使用 visibility:hidden / visibility:visible 来代替

.secret {
    visibility:hidden;
}

jQuery().ready(function() {
  $(".hoverMe").hover(function () {
    $(this).find(".secret").css("visibility", "visible");
  }, function () {
    $(this).find(".secret").css("visibility", "hidden");
  });
});

示例：http://jsfiddle.net/bM7f2/

Answer 3

http://api.jquery.com/children/

jQuery(this).children('.secret')[0]

哦，你试过了。没关系。

Answer 4

$(function(){
    $("ul li.hoverMe").hover(function(){
        $(this).children("div.secret").show();
    },
    function(){
        $(this).children("div.secret").hide();
    });
});

Answer 5

jQuery().ready(function() {
                jQuery('.hoverMe').hover(function(){
                    jQuery(this).children('.secret').**t**oggle();
                });
            });

JS 区分大小写

Answer 6

• 使用 children。
• toggle 需要以小写字母开头。
• 重要提示：您需要列表元素中的其他“可见”内容。否则它不占用空间并且没有任何东西可以悬停在上面。至少您必须添加一个  。正如您在演示中看到的，我添加了这些。如果删除它，它将不再起作用。

所以应该是：

jQuery('.hoverMe').hover(function(){
    jQuery(this).children('.secret').toggle();
});

你的就绪处理程序也是错误的，必须是：

jQuery(document).ready(function() {
    //...
});

DEMO

Answer 7

如果这种情况发生在您身上并且似乎没有任何作用，请尝试将另一个 child() 添加到链中，或者至少检查您的标记以确保您的父元素不是真正的祖父元素。

答案是：

$(this).children().children().show();