JQury slideToggle flashing problem and solution-JS Tutorial-php.cn

JQury slideToggle flashing problem and solution

巴扎黑

Release： 2017-06-29 11:50:38

Original

1573 people have browsed it

When using slideToggle, we often encounter the problem of flickering when the list is closed. Generally, IE browser will have this problem, and other browsers such as Firefox will not flicker.

1. Solution
Configure on the page as follows

where "http://www.w3.org/TR/html4/loose.dtd" is required, if missing This sentence still has the problem of flickering. I'm not sure why.
I checked it and it seems that this sentence involves regulations. If anyone sees this post and knows the reason, please leave a message, thank you
2. Example
[The following is an example]

The code is as follows:

<!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"> 
p.panel,p.flip1,p.pane2,p.flip2 
{ 
margin:0px; 
padding:5px; 
text-align
:center; 
background
:#e5eecc; 
border:solid 1px #c3c3c3; 
width:150px; 
} 
p.panel,p.pane2 
{ 
display:none; 
} 
</style> 
</head> 
<body> 
<p class="flip1">基础数据</p> 
<p class="panel"> 
<p><a href="#">员工管理</a></p> 
<p><a href="#">角色管理</a></p> 
<p><a href="#">
权限管理
</a></p> 
</p> 
<p class="flip2">新闻管理</p> 
<p class="pane2"> 
<p><a href="#">查询新闻</a></p> 
<p><a href="#">添加新闻</a></p> 
</p> 
</body> 
</html>

Copy after login

The above is the detailed content of JQury slideToggle flashing problem and solution. For more information, please follow other related articles on the PHP Chinese website!