JQuery的toggleClass家長和孩子

我只是去了解Javascript和jQuery和我不知道這一點：是否有這種較短的方式：JQuery的toggleClass家長和孩子

$(".toggle").click(function(){ 
$(this).parent().toggleClass("collapsed"); 
$(this).parent().children().toggleClass("collapsed"); 
$(this).parent().next(".abcContent").toggle(0);

我很高興我得到了它要畢竟工作，但肯定這不是如何做得很好......我想切換父類（abcTitle）包括其子（即按鈕）。

<div class="abcTitle"> 
<div class="abcButton toggle"></div> 
<h4 class=toggle>Title</h4><div class="sortable"></div> 
</div> 
<div class="abcContent">Content</div>

感謝您的啓迪！

爲了澄清這裏的一些相關的CSS

.abcButton { 
    background-image:url(minus.png); 
} 
.abcButton.collapsed { 
    background-image:url(plus.png); 
} 
.abcTitle { 
    border-top-left-radius:14px; 
} 
.abcTitle.collapsed { 
    border-bottom-left-radius:14px; 
}

所以基本上在任abcButton或H4點擊應該觸發abcContent的同時加入類.collapsed既abcButton和abcTitle崩潰。
（順便說一句，如果我能想出如何從點擊功能排除

<div class="sortable"></div>

我可以只讓abcTitle我的點擊處理程序，無需單獨abcButton和H4）

來源

2011-01-19 Tim

如果你想顯示/隱藏在同級各種不同的元素，那豈不是更容易隱藏一個包含它們的容器？ – polarblau 2011-01-19 19:59:07

不知道這是我想做的事情......我試圖在向其他人添加類時隱藏/顯示一個元素。 – Tim 2011-01-19 22:17:43

你應該緩存，或鏈，你的jQuery對象; $(this).parent()正在計算3次。

$(".toggle").click(function(){ 
    var self = $(this).parent(); 

    self.toggleClass("collapsed"); 
    self.children().toggleClass("collapsed"); 
    self.next(".abcContent").toggle(0);

您不應該將collapsed類添加到您的子元素;你的CSS應該確定這些元素是從父類具有摺疊類的事實中摺疊起來的。

div.abcTitle h4 { 
    /* Styles when the element is shown */ 
} 

div.abcTitle.collapsed h4 { 
    /* Styles when the element is collapsed */ 
}

你或許可以保證下一個元素永遠是abcContent，所以你不應該需要擔心選擇的下一個元素。

如果您要切換多個元素，最好使用delegate或live方法，它們利用JavaScript的事件冒泡機制;事件處理程序只綁定到一個元素，而不是所有元素，從而提高性能。

說到這一切，更好的解決方法可能如下：

$(document).delegate('.toggle', 'click', function() { 
    $(this).parent().toggleClass('collapsed').next().toggle(); 
});

來源

2011-01-19 19:58:35 Matt

JQuery的toggleClass家長和孩子

回答

相關問題