温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-06-25 18:39:09 来源:网络 阅读:720 作者:1120173856 栏目:web开发

 链式操作风格:简单导航栏

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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库喔!
<script type="text/javascript">
$(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
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI