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 相关文章推荐
SinaEditor使用方法详解
Dec 28 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
学习Angularjs分页指令
Jul 01 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
jQuery判断自定义属性data-val用法示例
Jan 07 jQuery
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
vue实现图书管理系统
Dec 29 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
php5与php7的区别点总结
2019/10/11 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python win32 简单操作方法
2017/05/25 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
提高python代码运行效率的一些建议
2020/09/29 Python
印度服装购物网站:Limeroad
2018/09/26 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
更夫岗位责任制
2014/02/11 职场文书
学校开除通知书
2015/04/25 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
Vue3.0 手写放大镜效果
2021/07/25 Vue.js