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家长和孩子

回答

相关问题