0

私はjQueryを初めて使用しますが、これを理解することはできません。

最初のtoggleButtonをクリックすると、最初のtextContainerCollapsedをターゲットにして、そのクラスをtextContainerExpandedで切り替えたいと思います。そして、2番目のtoggleButtonをクリックすると、2番目のtextContainerCollapsedがそのクラスをtextContainerExpandedなどで切り替えたいと思います...

ただし、私が得ている結果は、クリックしたトグルボタンに関係なく、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;
}
4

2 に答える 2

1

closest()およびを使用した最初のバージョンfind()：

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

parent()およびを使用した2番目のバージョンnext()：

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

parent()およびを使用した3番目のバージョンsiblings()：

$(this)
  .parent()
  .siblings()
  .toogleClass("textContainerExpanded");
于 2012-10-24T09:43:46.893 に答える
0 
$('.toogleButton').click(function() {
    $(this).parent().next()
           .toggleClass('textContainerCollapsed textContainerExpanded');
});
于 2012-10-24T09:56:34.453 に答える