this.parent toggleClass另一個孩子div

我是jQuery的新手，我無法弄清楚這一點。this.parent toggleClass另一個孩子div

當我點擊第一個toggleButton時，我想定位第一個textContainerCollapsed並使用textContainerExpanded切換其類。如果我點擊第二個toggleButton，我想第二個textContainerCollapsed使用textContainerExpanded來切換它的類，等等......

但是，我得到的結果是，所有使用textContainerCollapsed的div都會受到影響我點擊toggleButton。使用closest()和find()

$(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; 
}

來源

2012-10-24 Sam

可能一個相信你也嘗試'toggleClass'而不是'toogleClass'？ – lonesomeday

1日版本：

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

使用 parent()和

第2版：

使用 parent()和 siblings()

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

第3版：

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

來源

2012-10-24 09:43:46 VisioN

或'$（「。textContainerCollapsed」，$（this）.parents（「。parent」））' –

@JosephMarikle雖然在你的例子中使用'closest（）'更好，但還有很多其他組合:) – VisioN

哦，真好！謹慎分享爲什麼最接近會更好或者可能是鏈接？我總是一個優化的jQuery。：D –

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

來源

2012-10-24 09:56:34 billyonecan

this.parent toggleClass另一個孩子div

回答

相關問題