<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bind折叠效果</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <style type="text/css"> .head{ height: 15px;} .content{ display: none; } .heightlight{ background: #ff3300;} </style> <script type="text/javascript"> $(function(){ /*$("#panel H5.head").bind("click",function(){ var $content = $(this).next(); if ($content.is(":visible")) { //如果内容显示 $content.hide(); }else{ $content.show(); } })*/ //toggle()方法 /*$("#panel H5.head").toggle(function(){ $(this).next().show(); },function(){ $(this).next().hide() }); */ //toggle()方法显示隐藏 /*$("#panel H5.head").toggle(function(){ $(this).next().toggle(); },function(){ $(this).next().toggle(); }) */ //高亮加强效果 $("#panel H5.head").toggle(function(){ $(this).addClass("heightlight"); $(this).next().toggle(); },function(){ $(this).removeClass("heightlight"); $(this).next().toggle(); }) }) </script> </head> <body> <div id="panel"> <H5 class="head">什么是query？</H5> <div class="content"> jquery 解放军阿拉萨了解阿拉放假阿凡；阿大结局侏罗纪 </div> </div> </body> </html>