jquery-练习-折叠效果

浏览数：183 / 时间：2015年06月09日

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