本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能。分享给大家供大家参考。具体如下: jQuery技术相当好使用,的确可以用很少的代码实现想要的功能,比如这款经常用到的“显示”与“隐藏”的功能,只需要3行代码就实现了,确实够给力。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hide-show-style-demo/ 具体代码如下: 3行代码实现显示与隐藏 .showmore{ float:left;} .cont .aa { height: auto; width: 400px; border: 1px solid #000000; margin-bottom: 10px; padding-right: 10px; padding-left: 10px; float: left; } .cont .aa .a1 { float: left; height: 30px; width: 300px; } .cont .aa .a2 { height: 30px; width: 350px; float: left; display:none; } tab1 显示 详细说明:今天你要嫁给我嘛~ tab2 显示 详细说明:北京、上海四日游 tab3 显示 详细说明:河南是华夏文明的根源 $(".showmore a span").mouseover(function(e){ $(this).html(["显示", "隐藏"][this.hutia^=1]); $(this.parentNode.parentNode).next().toggle(); e.preventDefault(); }); 希望本文所述对大家的jQuery程序设计有所帮助。