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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
javascript iframe跨域详解
Oct 26 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
你可能不再需要JQUERY
2021/03/09 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
火山动力Java笔试题
2014/06/26 面试题
促销活动总结怎么写
2014/06/25 职场文书
同志主要表现材料
2014/08/21 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
亮剑观后感600字
2015/06/05 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
详解如何用Python实现感知器算法
2021/06/18 Python