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 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 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设计模式之访问者模式
2016/09/23 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
php中序列化与反序列化详解
2017/02/13 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript实现打地鼠小游戏
2020/04/23 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
JavaScript如何对图片进行黑白化
2018/04/10 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python实现学员管理系统
2019/02/26 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python实现猜拳小游戏
2020/04/05 Python
python 实现视频 图像帧提取
2019/12/10 Python
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
学生自我鉴定
2013/12/18 职场文书
会计专业大学生求职信范文
2014/01/28 职场文书
国际贸易实训总结
2015/08/03 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
MySQL中varchar和char类型的区别
2021/11/17 MySQL
Python作用域和名称空间的详细介绍
2022/04/13 Python