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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
js constructor的实际作用分析
Nov 15 Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 Javascript
js获取ajax返回值代码
Apr 30 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
实例讲解React 组件生命周期
Jul 08 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的分页功能
2007/03/21 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
2012/03/21 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
JS实现图片放大镜插件详解
2017/11/06 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python如何批量生成和调用变量
2020/11/21 Python
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
低碳环保口号
2014/06/12 职场文书
教室布置标语
2014/06/26 职场文书
大学学生会主席竞选稿
2015/11/19 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
Go 语言结构实例分析
2021/07/04 Golang
灵能百分百第三季什么时候来?
2022/03/15 日漫