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 浮动层菜单收藏
Jan 16 Javascript
jQuery 美元符冲突的解决方法
Mar 28 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
Vue深入理解插槽slot的使用
Aug 05 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
Yii框架form表单用法实例
2014/12/04 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
微信小程序 swiper组件构建轮播图的实例
2017/09/20 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
小程序实现列表删除功能
2018/10/30 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
区域销售经理职责
2013/12/22 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
电气个人求职信范文
2014/02/04 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
商务英语广告词大全
2014/03/18 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
2014年度培训工作总结
2014/11/27 职场文书
婚礼家长致辞
2015/07/27 职场文书