我刚刚开始了解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应该会在abcButton和abcTitle中添加类.collapsed时触发abcContent的崩溃。
(顺便说一句,如果我能弄清楚如何排除
<div class="sortable"></div>
从点击功能我可以让abcTitle我的点击处理程序,而不需要分离abcButton和h4)
答案 0 :(得分:1)
你应该缓存或链接你的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();
});
答案 1 :(得分:-1)
$(document).ready(function(){
$(".clickclassname").click(function(){
$("body").toggleClass("addclassname");
});
});