快捷導(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à)仍然會(huì)有閃爍的問(wèn)題，具體為什么我不太清楚
我查了下，這個(gè)句話(huà)好象牽扯到規(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="#">查詢(xún)新聞</a></p> 
<p><a href="#">添加新聞</a></p> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼
如果頁(yè)面比較高，當(dāng)滾動(dòng)條拖到頁(yè)面的下面的時(shí)候，側(cè)邊欄會(huì)出現(xiàn)一個(gè)固定跟隨瀏覽器的DIV框，下面將思路及具體實(shí)現(xiàn)與大家分享下
2014-09-09
利用jquery操作select下拉列表框的代碼
利用jquery操作select下拉列表框的代碼，需要的朋友可以參考下，jquery操作select的相關(guān)文章會(huì)給你更多的驚喜。
2010-06-06
jquery select選中的一個(gè)小問(wèn)題
jquery使select選中的注意事項(xiàng)。
2009-10-10
jQuery Ajax之load()方法
jQuery對(duì)Ajax操作進(jìn)行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是laod()、$.get()和$.post()方法，第3層是$.getScript()和$.getJSON()方法。
2009-10-10
jQuery對(duì)象的length屬性用法實(shí)例
這篇文章主要介紹了jQuery對(duì)象的length屬性用法,實(shí)例分析了length屬性獲取集合中對(duì)象數(shù)目的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jQuery1.9.1針對(duì)checkbox的調(diào)整方法(prop)
這篇文章主要介紹了jQuery1.9.1針對(duì)checkbox的調(diào)整方法，用prop代替attr
2014-05-05
jQuery實(shí)現(xiàn)基本淡入淡出效果的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)基本淡入淡出效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery使用fadeIn()、fadeOut()及fadeToggle()等方法控制頁(yè)面元素淡入淡出顯示效果的相關(guān)操作技巧,需要的朋友可以參考下
2018-09-09
基于Jquery easyui 選中特定的tab
這篇文章主要介紹了基于Jquery easyui 選中特定的tab的相關(guān)資料,需要的朋友可以參考下
2015-11-11
jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件
我們一說(shuō)到j(luò)Query中對(duì)于元素的修改,就是元素的內(nèi)容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關(guān)于jQuery綁定點(diǎn)擊事件與改變事件的方式總結(jié)及多個(gè)元素綁定多個(gè)事件的相關(guān)資料,需要的朋友可以參考下
2022-12-12
解決jQuery插件tipswindown與hintbox沖突
先掃下盲：tipswindown是jQuery的彈窗插件，可以使用url或當(dāng)前頁(yè)元素顯示在模擬層中；hintbox是jQuery的類(lèi)似Google Suggestions插件。
2010-11-11