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()和find()的第一个版本：

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

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

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

使用parent()和siblings()的第3版：

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

Answer 2

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

另一个子div的this.parent toggleClass

2 个答案: