主要是slideToggle属性,其中toggle意思为切换元素可见状态,如diplay:none变为display:block或反之。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js">
</script>
<style type="text/css">
*{padding: 0;margin: 0;}
.nav span{width:150px;background: mediumpurple;display: block;text-align: center;margin: 0 auto;cursor:pointer;}
.nav #content{width:840px;height:341;margin: 0 auto;display: none;}
</style>
</head>
<body>
<div class="nav">
<div id="content">
<img src="../img/pic01.jpg" width="840" height="341"></img>
</div>
<span>展开</span>
</div>
<script>
$('.nav span').click(function(){
var dis=$('#content').css('display');
if(dis=="none"){
$(this).html('收起');
}
else{
$(this).html('展开');
}
$('#content').slideToggle();
})
</script>
</body>
</html>