JQury slideToggle閃爍問題及解決辦法
更新時間：2011年07月05日 23:53:34 作者：
在使用slideToggle 的時候經(jīng)常會遇到列表收起時候閃爍的問題,一般IE瀏覽器會有這個問題，其他瀏覽器比如火狐不會出現(xiàn)閃爍.
一、解決方法
在頁面配置<!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" 是必需的，如果少了這句話仍然會有閃爍的問題，具體為什么我不太清楚
我查了下，這個句話好象牽扯到規(guī)范。如果有大牛看到這篇帖并知道原因，請留言，謝謝
二、例子
[下面是一個例子]
<!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>
在頁面配置<!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" 是必需的，如果少了這句話仍然會有閃爍的問題，具體為什么我不太清楚
我查了下，這個句話好象牽扯到規(guī)范。如果有大牛看到這篇帖并知道原因，請留言，謝謝
二、例子
[下面是一個例子]
復(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固定浮動側(cè)邊欄實現(xiàn)思路及代碼
如果頁面比較高，當滾動條拖到頁面的下面的時候，側(cè)邊欄會出現(xiàn)一個固定跟隨瀏覽器的DIV框，下面將思路及具體實現(xiàn)與大家分享下2014-09-09
利用jquery操作select下拉列表框的代碼，需要的朋友可以參考 下，jquery操作select的相關(guān)文章會給你更多的驚喜。2010-06-06
jquery使select選中的注意事項。2009-10-10
jQuery對Ajax操作進行了封裝，在jQuery中$.ajax()方法屬于最底層的方法，第2層是laod()、$.get()和$.post()方法，第3層是$.getScript()和$.getJSON()方法。2009-10-10
這篇文章主要介紹了jQuery對象的length屬性用法,實例分析了length屬性獲取集合中對象數(shù)目的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery1.9.1針對checkbox的調(diào)整方法(prop)
這篇文章主要介紹了jQuery1.9.1針對checkbox的調(diào)整方法，用prop代替attr2014-05-05
這篇文章主要介紹了jQuery實現(xiàn)基本淡入淡出效果的方法,結(jié)合實例形式詳細分析了jQuery使用fadeIn()、fadeOut()及fadeToggle()等方法控制頁面元素淡入淡出顯示效果的相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了 基于Jquery easyui 選中特定的tab的相關(guān)資料,需要的朋友可以參考下2015-11-11
jQuery綁定點擊事件與改變事件的方式總結(jié)及多個元素綁定多個事件
我們一說到j(luò)Query中對于元素的修改,就是元素的內(nèi)容、屬性、樣式的修改,下面這篇文章主要給大家介紹了關(guān)于jQuery綁定點擊事件與改變事件的方式總結(jié)及多個元素綁定多個事件的相關(guān)資料,需要的朋友可以參考下2022-12-12
解決jQuery插件tipswindown與hintbox沖突
先掃下盲：tipswindown是jQuery的彈窗插件，可以使用url或當前頁元素顯示在模擬層中；hintbox是jQuery的類似Google Suggestions插件。2010-11-11