JQury slideToggle闪烁问题及解决办法

一、解决方法
在页面配置<!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>

赞 (0)

相关推荐

  • jquery中show()、hide()和toggle()用法实例

    本文实例讲述了jquery中show().hide()和toggle()用法.分享给大家供大家参考.具体分析如下: 这里介绍了jquery效果:show()方法.hide()方法和toggle()方法 现实应用场景:QQ面板里我的好友分组 复制代码 代码如下: <html> <head> <title>jquery效果:show()方法.hide()方法和toggle()方法</title> <script type="text/javasc

  • jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)

    实例 通过使用滑动效果,在显示和隐藏状态之间切换 <p> 元素: 复制代码 代码如下: $(".btn1").click(function(){ $("p").slideToggle(); }); 定义和用法 slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态. 如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素. 语法 $(selector).slideToggle(speed,callback)参

  • JQuery toggle使用分析

    今天重点一个toggle(fn,fn,-.)函数,主要是用来切换某个事件的轮换操作. 比如:对一个按钮的点击事件和一个DIV的背景,点击一次按钮,将DIV的背景显示为蓝色,点击第二次的时候要将DIV的 背景色改为黑色. 我们定义的HTML代码如下: <body> <input type="button" id="btnShow" value="Toggle"/> <div id="DivToggle&quo

  • jquery中交替点击事件toggle方法的使用示例

    复制代码 代码如下: $('#clickId').toggle( function(){$('#divId').hide();}, function(){$('#divId').show();} ); toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能

  • Android控件之ToggleButton的使用方法

    Android控件之ToggleButton的使用方法

    ToggleButton的状态只能是选中和未选中,并且需要为不同的状态设置不同的显示文本. 以下案例为ToggleButton的用法 目录结构 main.xml布局文件 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    androi

  • ionic实现带字的toggle滑动组件

    ionic实现带字的toggle滑动组件

    前言 由于项目中需要带字的toggle滑动组件,而ionic提供的是这样的: 实际项目中需要这样子的: 在网上找了下其他的实现,感觉没得类似的,也没发现合适的,于是自己试着定义了一个凑合着用.先上效果图 看效果图边缘有模糊锯齿现象,可能是由于像素的影响,在android和ios手机上表现非常流畅. 实现代码 其实实现起来也很简单,主要是算好滑块的位置,滑动用的是css的transform. css用到的类如下: .switch_search{ position:relative;display:

  • ionic实现滑动的三种方式

    在移动端受屏幕大小所限,展示内容很多的时候,就要使部分区域进行滑动.本文展示项目中所有到的几种方式,大家可以看自己的需求选择合适的滑动方式.实现滑动的基本原理,有两个容器A.B,假如A在外层,B在内层:外层的A宽度或高度固定,内层容器B宽度或者高度大于A即可实现滚动. 实现方式 1). ion-scroll 利用ionic自带的滑动指令 <ion-view view-title="Dashboard"> <ion-content class="padding

  • JQuery入门——事件切换之toggle()方法应用介绍

    JQuery入门——事件切换之toggle()方法应用介绍

    1.在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn.fn2.fn3.fn4等函数依次调用. 2.示例代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • jQuery toggle()设置CSS样式

    toggle() 切换元素的可见状态. 如果元素是可见的,切换为隐藏的:如果元素是隐藏的,切换为可见的. --------------------------------- 示例 切换所有段落的可见状态. HTML 代码: <p>Hello</p><p style="display: none">Hello Again</p> jQuery 代码: $("p").toggle() 结果: <p tyle=&quo

  • ionic实现可滑动的tab选项卡切换效果

    ionic实现可滑动的tab选项卡切换效果

    利用ionic的slide-box组件实现可滑动的tab,主要是监听tab点击以及slide页面滑动的事件,做相应的处理,用ng-repeat循环,优化.简略了代码,有需要的同学可以看看. 先来张效果图: 用到的css代码: .tab_default{ border-bottom:solid 1px #F2F2F2; padding:6px 0; } .tab_select{ border-bottom:solid 1px #3E89F5; box-shadow:0 -3px 8px #C1D3

随机推荐