JQury slideToggle闪烁问题及解决办法


Posted in Javascript onJuly 05, 2011

一、解决方法
在页面配置<!DOCTYPE />如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
其中 "http://www.w3.org/TR/html4/loose.dtd" 是必需的,如果少了这句话仍然会有闪烁的问题,具体为什么我不太清楚
我查了下,这个句话好象牵扯到规范。如果有大牛看到这篇帖并知道原因,请留言,谢谢
二、例子
[下面是一个例子]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"> 
</script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".flip1").click(function(){ 
$(".panel").slideToggle("slow"); 
}); 
}); 
$(document).ready(function(){ 
$(".flip2").click(function(){ 
$(".pane2").slideToggle("slow"); 
}); 
}); 
</script> 
<style type="text/css"> 
div.panel,p.flip1,div.pane2,p.flip2 
{ 
margin:0px; 
padding:5px; 
text-align:center; 
background:#e5eecc; 
border:solid 1px #c3c3c3; 
width:150px; 
} 
div.panel,div.pane2 
{ 
display:none; 
} 
</style> 
</head> 
<body> 
<p class="flip1">基础数据</p> 
<div class="panel"> 
<p><a href="#">员工管理</a></p> 
<p><a href="#">角色管理</a></p> 
<p><a href="#">权限管理</a></p> 
</div> 
<p class="flip2">新闻管理</p> 
<div class="pane2"> 
<p><a href="#">查询新闻</a></p> 
<p><a href="#">添加新闻</a></p> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript来定义类的规范小结
Nov 19 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
小程序实现录音上传功能
Nov 22 Javascript
vue修饰符.capture和.self的区别
Apr 22 Vue.js
jquery中通过过滤器获取表单元素的实现代码
Jul 05 #Javascript
jquery中获取元素的几种方式小结
Jul 05 #Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 #Javascript
Javascript计算时间差的函数分享
Jul 04 #Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 #Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 #Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
Jul 04 #Javascript
You might like
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP的SQL注入过程分析
2012/01/06 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
简单了解python协程的相关知识
2019/08/31 Python
python烟花效果的代码实例
2020/02/25 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
幼儿生日活动方案
2014/08/27 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
走群众路线剖析材料
2014/10/09 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
施工安全责任协议书
2016/03/23 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Python机器学习之PCA降维算法详解
2021/05/19 Python