jquery - this.parent toggleClass 另一个子 div

Question

我是 jQuery 新手，我无法弄清楚这一点。

当我单击第一个 toggleButton 时，我想定位第一个 textContainerCollapsed 并使用 textContainerExpanded 切换其类。如果我单击第二个 toggleButton，我希望第二个 textContainerCollapsed 用 textContainerExpanded 切换其类，依此类推...

但是，我得到的结果是，无论我单击哪个 toggleButton，所有带有 textContainerCollapsed 的 div 都会受到影响。

js

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

        $(".textContainerCollapsed").toogleClass("textContainerExpanded",500);

        //Also tried
        //$(this).parent(".textContainerCollapsed").toogleClass("textContainerExpanded",500);

        //Also tried
        //$(this).parent.children(".textContainerCollapsed").toogleClass("textContainerExpanded",500);

        //Also tried
        //$(this).parent.next(".textContainerCollapsed").toogleClass("textContainerExpanded",500);

        //Also tried
        //$(this).parent(".parent").next(".textContainerCollapsed").toogleClass("textContainerExpanded",500);

        //Also tried
        //$(this).parent(".parent").children(".textContainerCollapsed").toogleClass("textContainerExpanded",500);

        //Also tried
        //$(this).parent(".parent").find(".textContainerCollapsed").toogleClass("textContainerExpanded",500);

    });
});

html

<div class="parent">
    <div class="buttonContainer">
        <a href="#" class="toogleButton">
    </div>
    <div class="textContainerCollapsed">
        Some text
    </div>
</div>
<div class="parent">
    <div class="buttonContainer">
        <a href="#" class="toogleButton">
    </div>
    <div class="textContainerCollapsed">
        Some text
    </div>
</div>

css

.textContainerCollapsed
{
    height: 0px;
    overflow: hidden;
}
.textContainerExpanded
{
    height: 100%;
    overflow: hidden;
}

Answer 1

第一个版本使用closest()and find()：

$(this)
  .closest(".parent")
  .find(".textContainerCollapsed")
  .toogleClass("textContainerExpanded");

第二个版本使用parent()and next()：

$(this)
  .parent()
  .next()
  .toogleClass("textContainerExpanded");

第三个版本使用parent()and siblings()：

$(this)
  .parent()
  .siblings()
  .toogleClass("textContainerExpanded");

Answer 2

$('.toogleButton').click(function() {
    $(this).parent().next()
           .toggleClass('textContainerCollapsed textContainerExpanded');
});