Question

所以我试图制作一个在点击标题时折叠的部分。它可以工作，如果我使用以下，但显然折叠所有部分而不是只是点击：

$(".foldUpSection").find(".header").click(function()
{
    $(".foldUpSection").find(".foldMeUp").slideToggle();
});

我把它改为

$(".foldUpSection").find(".header").click(function()
{
    $(this).find(".foldMeUp").slideToggle();
});

但这没有任何作用。我错过了为什么它没有通过点击传递这个？

这是HTML

<div class="foldUpSection">
    <span class="header">Unprocessed EDIs</span>
    <div id="unprocessedEdi" class="foldMeUp">
    </div>
</div>

Answer 1

在该上下文中this引用$(".foldUpSection").find(".header")

find()函数查找选择器的后代，而$(".foldUpSection").find(".header")没有类foldMeUp的后代。

Answer 2

使用$（this）和.find（）使你定位错误的元素。

使用.next()或.siblings()，find()搜索儿童，foldmeup是兄弟姐妹

   $(this).siblings(".foldMeUp").slideToggle();

或

 $(this).next(".foldMeUp").slideToggle();

Answer 3

如果DOM结构没有一成不变（因此您可能在.header和.foldMeUp之间有其他元素，请使用：

$(".foldUpSection").find(".header").click(function()
{
    $(this).closest(".foldUpSection").find(".foldMeUp").slideToggle();
});