点击标题显示隐藏效果--jQuery

<!DOCTYPE html>

<html >

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

jqueryjqueryjqueryjqueryjquerydfhdfdfgdgd时都会多难看开始的那款的那颗卡机的刷卡了

</div>

</div>

</body>

</html>