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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
拥抱模块化的JavaScript
2012/03/07 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
Python编写一个闹钟功能
2017/07/11 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Python 实现数组相减示例
2019/12/27 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
英语翻译系毕业生求职信
2013/09/29 职场文书
总务岗位职责
2013/11/19 职场文书
活动总结模板
2014/05/09 职场文书
某某同志考察材料
2014/05/28 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
尊师重教演讲稿
2014/09/04 职场文书
英文自荐信范文
2015/03/25 职场文书
社会实践单位意见
2015/06/05 职场文书
加强党性修养心得体会
2016/01/21 职场文书
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python