Home > Article > Web Front-end > JQury slideToggle flashing problem and solution

JQury slideToggle flashing problem and solution

巴扎黑Original: 2017-06-29 11:50:381628browse

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 7758f75eaa8b2856d574fece07da8ebf on the page as follows
98b4a04187af3f8d9c2852e86995f9a5
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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：The difference between toggle and slideToggle in jqueryNext article：The difference between toggle and slideToggle in jquery

See more

JQury slideToggle flashing problem and solution

Related articles