jQuery仅用3行代码实现的显示与隐藏功能完整实例

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

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

运行效果截图如下：

具体代码如下：

<!doctype html>

<html>

<head>

<meta charset="gbk" />

<title>3行代码实现显示与隐藏</title>

<script type="text/javascript" src="jquery1.3.2.js"></script>

<style>

.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;

}

</style>

</head>

<body>

<div class="cont">

<div class="aa">

<div class="a1">tab1</div>

<div class="showmore"><a href="#"><span>显示</span></a></div>

<div class="a2">详细说明：今天你要嫁给我嘛~</div>

</div>

<div class="aa">

<div class="a1">tab2</div>

<div class="showmore" ><a href="#"><span>显示</span></a></div>

<div class="a2">详细说明：北京、上海四日游</div>

</div>

<div class="aa">

<div class="a1">tab3</div>

<div class="showmore" ><a href="#"><span>显示</span></a></div>

<div class="a2">详细说明：河南是华夏文明的根源</div>

</div>

</div>

<script>

$(".showmore a span").mouseover(function(e){

$(this).html(["显示", "隐藏"][this.hutia^=1]);

$(this.parentNode.parentNode).next().toggle();

e.preventDefault();

});

</script>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。