javascript - 当我使用它时，jquery单击绑定不起作用

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>

score 4 · Accepted Answer

在这种情况下this指$(".foldUpSection").find(".header")

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

score 1 · Accepted Answer

使用 $(this) 和 .find() 会使您定位错误的元素。

使用.next()or .siblings()，find()搜索孩子，foldmeup 是兄弟

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

或者

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

score 1 · Accepted Answer

如果 DOM 结构不是一成不变的（因此您可能在.header&之间有其他元素.foldMeUp，请使用以下命令：

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

这是小提琴：http: //jsfiddle.net/jEgK4/

3 回答 3