<!DOCTYPE html>
<html>
<head>
<title>锋利的jQuery</title>
<script src="jquery-3.1.1.js"></script>
<script>
$(function(){
$(‘#panel h5.head‘).bind(‘click‘,function(){
var $content = $(this).next(); if($content.is(‘:visible‘)){
$content.hide();
}else{
$content.show();
}
});
});
</script>
<style type="text/css">
h5{
width: 200px;
border: 1px solid #000;
background-color: #ccc;
}
.content{
display: none;
}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery</h5>
<div class="content">
这是一段话，我显示时点击“什么是jQuery”我会消失，我消失时点击“什么是jQuery”我会显现
</div>
</div>
</body>
</html>
show()和hide()是jQuery中最基本的动画用法。
在HTML文档中，为一个元素调用hide()方法，会将该元素的display样式改为"none"(注意：不能与visibility:visible/hidden在一起用)
$(‘element‘).hide();就相当于CSS中的display:none;
相反$(‘element‘).show();就相当于CSS中的display:block;
而可见性 过滤器:visible / :hide也与show(),hide()在一起用
时间： 2024-10-10 23:04:34