另一个 jquery 找到下一个 class 不是 slideToggle 的同级

Question

所有 .setupData 默认隐藏。

当我点击 .setupTitle class 时，我希望它立即（DOM 中的下一个）.setupData 切换。

我试过

的多种变体

$(".setupTitle").click(function(){
    $(this).parent(".setupBlock").next(".setupData").slideToggle();
});

但没有骰子。

<div class="setupBlock">
    <div class="setupTitle">
        consignees <img src="img/open.png" class="openArrow"">
    </div>
    <div id="consigneeDiv" class="setupData">
            consignees
    </div>
    <div class="clr"></div>
</div>  

<div class="setupBlock">
    <div class="setupTitle">
        locations <img src="img/open.png" class="openArrow"">
    </div>
    <div id="locaDiv" class="setupData">
        locations
    </div>
    <div class="clr"></div>
</div>  

<div class="setupBlock">
    <div class="setupTitle">
        users <img src="img/open.png" class="openArrow"">
    </div>
    <div id="usersDiv" class="setupData">
            users
    </div>
    <div class="clr"></div>
</div>  

<div class="setupBlock">
    <div class="setupTitle">
        next numbers <img src="img/open.png" class="openArrow"">
    </div>
    <div id="nnDiv" class="setupData">
            next numbers
    </div>
    <div class="clr"></div>
</div>

Answer 1

你不想要 .next()，你想要 .find():

$(".setupTitle").click(function(){
    $(this).parent(".setupBlock").find(".setupData").slideToggle();
});

jsFiddle example

首先，您使用 $(this).parent(".setupBlock") 上 DOM 到父级。然后 .next() 元素将成为您不想要的下一个同级元素 <div class="setupBlock">。通过使用 .find(".setupData")，您停留在 div 内，并在其中向下搜索以找到相对 .setupData div.

Answer 2

.setupTitle是.setupData的兄弟，你可以调用：

 $(".setupTitle").click(function(){

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

  });

或者如果您更喜欢使用 .next()，您可以使用：

 $(".setupTitle").click(function(){

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

  });

或使用您的 .parent() 方法，您需要使用 .find() 而不是 .next() 因为一旦您遍历回父元素，您要查找的元素就是一个子元素：

$(this).parent(".setupBlock").find(".setupData").slideToggle();

.find() 查找后代，而 .next() 查找下一个元素

Answer 3

在你的代码中只需要找到父级的结果：

 $(".setupTitle").click(function(){
     $(this).parent().find(".setupData").slideToggle();
});

希望对您有所帮助！

另一个 jquery 找到下一个 class 不是 slideToggle 的同级

another jquery find next class not sibling for slideToggle

html

jquery

slidetoggle