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表单提交的代码
Sep 13 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
jquery cookie的用法总结
Nov 18 Javascript
js实现遮罩层划出效果是生成div而不是显示
Jul 29 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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模拟HTTP认证
2006/10/09 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
js利用for in循环获取 一个对象的所有属性以及值的实例
2017/03/30 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
vue.js项目nginx部署教程
2018/04/05 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JS前端知识点总结之内置对象,日期对象和定时器相关操作
2019/07/05 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python循环监控远程端口的方法
2015/03/14 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Python File(文件) 方法整理
2019/02/18 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
请解释接口的显式实现有什么意义
2012/05/26 面试题
高中军训感言500字
2014/02/24 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
微信搭讪开场白
2015/05/28 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
详解Python为什么不用设计模式
2021/06/24 Python