1

我刚刚开始了解 Javascript 和 JQuery，但我无法弄清楚：有没有更短的方法： 

$(".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）

4

2 回答 2

2

您应该缓存或链接您的 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，因此您不必担心选择下一个元素。

如果要切换多个元素，最好使用delegateorlive方法，它利用 JavaScript 的事件冒泡机制；事件处理程序只绑定到一个元素，而不是所有元素，从而提高性能。

说了这么多，更好的解决方案可能如下：

$(document).delegate('.toggle', 'click', function () {
    $(this).parent().toggleClass('collapsed').next().toggle();
});
于 2011-01-19T19:58:35.007 回答
-1 
$(document).ready(function(){ 

$(".clickclassname").click(function(){ 

$("body").toggleClass("addclassname"); 
}); 

});
于 2018-09-27T10:34:34.167 回答