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 相关文章推荐
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
Jan 30 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
Mar 23 Javascript
jquery select下拉框操作的一些说明
Apr 02 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
简单实现js放大镜效果
Jul 24 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
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
php 文件上传系统手记
2009/10/26 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
css图片自适应大小
2007/11/28 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
allbeauty美国:英国在线美容店
2019/03/11 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
2019年.net常见面试问题
2012/02/12 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
奖学金感谢信
2015/01/21 职场文书
教师考核表个人总结
2015/02/12 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
python实现简单的井字棋
2021/05/26 Python
JAVA API 实用类 String详解
2021/10/05 Java/Android