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

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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》