JQuery链式操作风格：简单导航栏

$(document).ready(function(){ //等待dom元素加载完毕

$(".has_children").click(function(){ //当鼠标点击含有.has_children元素的时候

$(this).addClass("highlight") //选择本元素添加一个类.highlight

.children("a") //其内部全部<a>子元素

.show() //显示元素

.end() //重新定位到上次操作的元素

.siblings() //含有.has_children的class的同辈元素

.removeClass("highlight"); //移除类.highlight

.children("a")//其内部全部<a>子元素

.hide();//隐藏元素

});

</script>

通过类似有意义的注释，能够培养良好的编码习惯和风格，提高开发效率;

上传了实例附件！需要的话就下载使用“记得自己换回后缀名.html”.使用时记得加载JQuery库喔！

$(document).ready(function(){

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

$(this).addClass("highlight")

.children("a").show().end()

.siblings().removeClass("highlight")

.children("a").hide();

});

</script>

附图：

JQuery链式操作风格：简单导航栏

崇礼网站建设公司创新互联建站,崇礼网站设计制作，有大型网站制作公司丰富经验。已为崇礼上千家提供企业网站建设服务。企业网站搭建\成都外贸网站制作要多少钱，请找那个售后服务好的崇礼做网站的公司定做！

——参考资料《锋利的JQuery》

附件：http://down.51cto.com/data/2361035

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容