点击标题显示隐藏效果--jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
// $("#panel h5.head").bind("mouseover",function(){
// $(this).next("div.content").show();
// });
// $("#panel h5.head").bind("mouseout",function(){
// $(this).next("div.content").hide();
// });
// $("#panel h5.head").mouseover(function(){
// $(this).next("div.content").show();
// });
// $("#panel h5.head").mouseout(function(){
// $(this).next("div.content").hide();
// });
// $("#panel h5.head").hover(function(){
// $(this).next("div.content").show();
// },function(){
// $(this).next("div.content").hide();
// });
$("#panel h5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next("div.content").toggle();
},function(){
$(this).removeClass("highlight");
$(this).next("div.content").toggle();
});
})
</script>
<style>
.head{height:30px;line-height:30px;border:1px solid #000;background:#ccc;}
.content{display:none;}
.highlight{background:#ff3300;}
</style>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jqueryjqueryjqueryjqueryjquerydfhdfdfgdgd时都会多难看开始的那款的那颗卡机的刷卡了
</div>
</div>
</body>
</html>