快捷導(dǎo)航

JQury slideToggle閃爍問(wèn)題及解決辦法

更新時(shí)間：2011年07月05日 23:53:34 作者：

在使用slideToggle 的時(shí)候經(jīng)常會(huì)遇到列表收起時(shí)候閃爍的問(wèn)題,一般IE瀏覽器會(huì)有這個(gè)問(wèn)題，其他瀏覽器比如火狐不會(huì)出現(xiàn)閃爍.

一、解決方法
在頁(yè)面配置<!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" 是必需的，如果少了這句話仍然會(huì)有閃爍的問(wèn)題，具體為什么我不太清楚
我查了下，這個(gè)句話好象牽扯到規(guī)范。如果有大?？吹竭@篇帖并知道原因，請(qǐng)留言，謝謝
二、例子
[下面是一個(gè)例子]

復(fù)制代碼代碼如下:

 
<!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">基礎(chǔ)數(shù)據(jù)</p> 
<div class="panel"> 
<p><a href="#">員工管理</a></p> 
<p><a href="#">角色管理</a></p> 
<p><a href="#">權(quán)限管理</a></p> 
</div> 
<p class="flip2">新聞管理</p> 
<div class="pane2"> 
<p><a href="#">查詢新聞</a></p> 
<p><a href="#">添加新聞</a></p> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

超贊的jQuery圖片滑塊動(dòng)畫特效代碼匯總
本文將為大家收集10個(gè)超贊的jQuery圖片滑塊動(dòng)畫,都是小編精挑細(xì)選而來(lái)，希望這些現(xiàn)成的jQuery插件將為你節(jié)省很多開(kāi)發(fā)時(shí)間。
2016-01-01
基于JQuery的一個(gè)簡(jiǎn)單的鼠標(biāo)跟隨提示效果
代碼很簡(jiǎn)單主要是用到了JQuery的三個(gè)事件mouseover,mouseout,mousemove.
2010-09-09
jQuery在ie6下無(wú)法設(shè)置select選中的解決方法詳解
這篇文章主要介紹了jQuery在ie6下無(wú)法設(shè)置select選中的解決方法,結(jié)合實(shí)例分析了jQuery在ie6下無(wú)法設(shè)置select選中的原因與相關(guān)處理技巧,需要的朋友可以參考下
2016-09-09
jQuery unbind()方法實(shí)例詳解
這篇文章主要介紹了jQuery unbind()方法,結(jié)合實(shí)例形式詳細(xì)分析了unbind方法解除綁定的使用技巧,需要的朋友可以參考下
2016-01-01
jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開(kāi)后保存數(shù)據(jù)
這篇文章主要介紹了jQuery Easyui DataGrid點(diǎn)擊某個(gè)單元格即進(jìn)入編輯狀態(tài)焦點(diǎn)移開(kāi)后保存數(shù)據(jù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
jQuery簡(jiǎn)單操作cookie的插件實(shí)例
這篇文章主要介紹了jQuery簡(jiǎn)單操作cookie的插件,以實(shí)例形式分析了jQuery操作cookie的插件功能定義與使用技巧,需要的朋友可以參考下
2016-01-01
jQuery Ajax請(qǐng)求狀態(tài)管理器打包
現(xiàn)在的網(wǎng)站，在一個(gè)網(wǎng)頁(yè)中有異步請(qǐng)求甚至許多個(gè)異步請(qǐng)求已經(jīng)不足為奇。Ajax已經(jīng)成為了現(xiàn)在網(wǎng)站必須的基本功能，使網(wǎng)頁(yè)應(yīng)用更接近于桌面應(yīng)用
2012-05-05
jQuery中l(wèi)ive()方法用法實(shí)例
這篇文章主要介紹了jQuery中l(wèi)ive()方法用法,實(shí)例分析了live()方法的功能、定義及為匹配元素添加一個(gè)或多個(gè)事件,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行函數(shù)的使用技巧,需要的朋友可以參考下
2015-01-01
jquery操作checkbox火狐下第二次無(wú)法勾選的解決方法
這篇文章主要介紹了jquery操作checkbox火狐下第二次無(wú)法勾選問(wèn)題的解決方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
jQuery遮罩層實(shí)現(xiàn)方法實(shí)例詳解(附遮罩層插件)
這篇文章主要介紹了jQuery遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery遮罩層樣式及功能實(shí)現(xiàn)技巧,并附帶分析了一個(gè)簡(jiǎn)單jQuery遮罩層插件實(shí)現(xiàn)方法,需要的朋友可以參考下
2015-12-12