本文实例讲述了jQuery仅用3行代码实现的显示与隐藏功能。分享给大家供大家参考。具体如下：

jQuery技术相当好使用，的确可以用很少的代码实现想要的功能，比如这款经常用到的"显示"与"隐藏"的功能，只需要3行代码就实现了，确实够给力。

运行效果截图如下：

在线演示地址如下：

http://演示。jb51。net/js/2015/jquery-简单-隐藏-显示-样式-演示/

具体代码如下：

！doctype html html ownerta charset=' gbk '/title 3行代码实现显示与隐藏/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/脚本风格.showmore { float:left}。内容aa { height: auto宽度： 400像素；border: 1px固体# 000000;边距-底部： 10px填充-右： 10px左填充： 10px向左浮动：} .内容aa .a1 {左侧浮动：高度： 30px宽度： 300像素；} .内容aa .a2 { height: 30px宽度： 350像素；向左浮动：display : none }/style/head dydiv class=' cont ' div class=' aa ' div class=' a1 ' tab 1/div class=' show more ' a href=' # ' span显示/span/a/div class=' a2 '详细说明：今天你要嫁给我嘛~/div/div class=' aa ' div class=' a1 '选项卡2/div div class='显示更多' a href=' # 跨度显示/span/a/div class=' a2 '详细说明：北京、上海四日游/div/div class=' aa ' div class=' a1 '选项卡3/div div class='显示更多' a href=' # ' span显示/span/a/div class=' a2 '详细说明：河南是华夏文明的根源/div/divscript$(' .显示更大的跨度)。 鼠标悬停(函数(e){ $(本)).html(['显示', '隐藏'][this.hutia^=1])；$(this.parentNode.parentNode).下一个()。toggle()；e . PreventDefault()；});/脚本/正文/html希望本文所述对大家的jQuery程序设计有所帮助。