$(document).ready(function(){
$(".has_children").click(function(){
$(this).addClass("hover") //为当前的元素增加hover类
.children("a").show("").end() //获取当前元素的子节点并且显示;重新定位到上次操作的元素;
.siblings().removeClass("hover") //获取兄弟元素,并去掉他们的hover类;
.children("a").hide(""); //获取兄弟元素的子节点并且隐藏他们;
});
$(".has_children").click(function(){
$(this).addClass("hover") //为当前的元素增加hover类
.children("a").show("").end() //获取当前元素的子节点并且显示;重新定位到上次操作的元素;
.siblings().removeClass("hover") //获取兄弟元素,并去掉他们的hover类;
.children("a").hide(""); //获取兄弟元素的子节点并且隐藏他们;
});
})
总结代码格式要领如下:
1、对于同一对象不超过3个操作的,可以直接写成一行;如下
$("li").show().unbind("click"); //取消当前元素的click事件
2、对于同一对象的较多操作,建议每行写一个操作;如下:
$(this).removeClass("mouseout")
.addClass("mouseover")
.stop() //停止动画;
.fadeTo("fast",0.6)
fadeTo("fast",1)
unbind("click")
click(function(){
//do something……
});
3、对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当地缩进。
$(this).addClass("hover")
.children("li").show().end()
.siblings().removeClass("hover")
.children("li").hide();
4、培养良好的加注释的习惯;如下
//在一个id为table的表格的tbody中,如果每行最后一列中的checkbox没有被禁用,则把这行的背景设为红色;
$("#table>tbody>tr:has(td:last:has(:checkbox:enabled))").css("background","red");