JQUERY 展开收起显示隐藏效果

zoukankan html css js c++ java

JQUERY 展开收起显示隐藏效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jquery 收缩展开效果</title> <script type="text/javascript" src="http://www.mengdongli.com/skins/2012/js/jquery1.3.2.js"></script> <style> .text{line-height:22px;padding:0 6px;color:#666;} .box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;} .box{position:relative;border:1px solid #e7e7e7;} </style> </head> <body> <script type="text/javascript"> // 收缩展开效果 $(document).ready(function(){ // $(".box h1").toggle(function(){ // $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); // },function(){ //$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); //}); $("div.text").hide();//默认隐藏div，或者在样式表中添加.text{display:none}，推荐使用后者 $(".box h1").click(function(){ $(this).next(".text").slideToggle("slow"); }) }); </script>  <div class="box"> <h1>收缩展开效果</h1> <div class="text"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> </div> </div> <br /> <div class="box"> <h1>收缩展开效果</h1> <div class="text"> 1<br /> 2<br /> </div> </div> <br> 第一次运行请刷新一下页面。 </body> </html>
提示：您可以先修改部分代码再运行

查看全文

相关阅读:
基于Lucene/XML的站内全文检索解决方案
 内容管理系统(CMS)的设计和选型
 Lucene入门与使用[转]
为自己的系统搞个全文搜索参考值：2 (转)
C# 时间函数
 Lucene倒排索引原理(转)
什么是内容管理系统CMS？
网络测试常用命令
 C#与C的区别
 人生致命的八个经典问题

原文地址：https://www.cnblogs.com/liuzhuqing/p/7480656.html