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 自动转到命名锚记
Jan 10 Javascript
JavaScript 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
详解angular路由高亮之RouterLinkActive
Apr 28 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
微信小程序实现蓝牙打印
Sep 23 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
JS实现放大镜效果
2020/09/21 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[01:32]2016国际邀请赛中国区预选赛IG战队首日赛后采访
2016/06/27 DOTA
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
python 调用c语言函数的方法
2017/09/29 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
大学生自荐信
2013/12/11 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
见习报告格式要求
2014/11/04 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript