jQuery 在所有浏览器中的 SlideUp() 上闪烁...附有示例页面
我知道这个问题已经讨论过好几次了，但我有一个有点不同的问题。当调用 .slideUp() 并且浏览器风已经向下滚动以查看所有底部内容时，当 div 滑动关闭时它会闪烁多次。
示例页面如下，只需单击它所说的位置，然后滑动到底部并关闭上面的 div 之一。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This is the title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.Accordion > div.Content').click(function() {
$(this).prev('div.collapsePanelHeader').slideDown(1000);
$(this).slideUp(1000);
});
$('div.Accordion > div.collapsePanelHeader').click(function() {
$(this).slideToggle(1000);
$(this).next('div.Content').slideToggle(1000);
});
$('div.Accordion > div.collapsePanelHeader2').click(function() {
$(this).toggleClass('accordionHeaderSelected','accordionHeader');
$(this).next('div.Content2').slideToggle(1000);
});
});
</script>
<style type="text/css">
.Accordion
{
font-size: .9em;
background-color: #ebebeb;
border: solid 2px #ccc;
padding: 5px 10px;
width: 500px;
}
p
{
font-size: 1em;
}
.collapsePanelHeader
{
}
.HeaderContent
{
background-color: #ebebeb;
}
.Content
{
background-color: #fff;
border: solid 1px #ccc;
padding: 10px;
}
.accordionHeaderSelected
{
border: solid 1px #ccc;
background-color: #EBEBEB;
margin-bottom: 10px;
}
.accordionHeader
{
border: none;
background-color: #EBEBEB;
margin-bottom: 10px;
text-decoration: none;
}
.collapsePanelHeader2
{
}
.HeaderContent2
{
background-color: #ebebeb;
}
.Content2
{
background-color: #ebebeb;
padding-left: 30px;
}
.gvCSections
{
padding-top: -10px;
}
.gvCSections tr td
{
padding: 5px;
}
</style>
</head>
<body>
<div class="Accordion">
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
</div>
</body>
</html>
I know this has been discussed several times, but I have an issue that is a little different. when .slideUp() is called and the browser wind has been scrolled down to see all the bottom content, it flashes many times as the div is sliding closed.
Example page is below, just click where it says to, then slide to the bottom and close one of the upper divs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This is the title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.Accordion > div.Content').click(function() {
$(this).prev('div.collapsePanelHeader').slideDown(1000);
$(this).slideUp(1000);
});
$('div.Accordion > div.collapsePanelHeader').click(function() {
$(this).slideToggle(1000);
$(this).next('div.Content').slideToggle(1000);
});
$('div.Accordion > div.collapsePanelHeader2').click(function() {
$(this).toggleClass('accordionHeaderSelected','accordionHeader');
$(this).next('div.Content2').slideToggle(1000);
});
});
</script>
<style type="text/css">
.Accordion
{
font-size: .9em;
background-color: #ebebeb;
border: solid 2px #ccc;
padding: 5px 10px;
width: 500px;
}
p
{
font-size: 1em;
}
.collapsePanelHeader
{
}
.HeaderContent
{
background-color: #ebebeb;
}
.Content
{
background-color: #fff;
border: solid 1px #ccc;
padding: 10px;
}
.accordionHeaderSelected
{
border: solid 1px #ccc;
background-color: #EBEBEB;
margin-bottom: 10px;
}
.accordionHeader
{
border: none;
background-color: #EBEBEB;
margin-bottom: 10px;
text-decoration: none;
}
.collapsePanelHeader2
{
}
.HeaderContent2
{
background-color: #ebebeb;
}
.Content2
{
background-color: #ebebeb;
padding-left: 30px;
}
.gvCSections
{
padding-top: -10px;
}
.gvCSections tr td
{
padding: 5px;
}
</style>
</head>
<body>
<div class="Accordion">
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
一个简单的解决方法是在关闭可折叠元素之前检查 body 元素的计算高度，然后将 body 的计算高度设置为其 CSS height 属性。
这会强制 body 元素保持其高度，即使在关闭通常会将 body 重置/重绘到其之前的默认高度的高面板时也是如此。
另请注意，在检查计算的高度之前，CSS 高度将重置为 auto，否则 jQuery 会绕过计算的样式并使用上一次传递期间设置的值。
An easy fix is to check the computed height of the body element before closing a collapsible element, then set the body's computed height as its CSS height property.
This forces the body element to maintain its height, even when closing a tall panel that would normally reset/redraw the body to its earlier default height.
Note also that before checking the computed height, the CSS height is reset to auto, otherwise jQuery bypasses the computed style and uses the value set during the previous pass.
您是否尝试检测窗口是否滚动并将窗口居中或移动。
仅当窗口一直向下滚动且内容变小时，因此您不再需要滚动，滚动条/窗口的高度发生变化并开始闪烁时，才会发生这种情况。但我想这可能有点矫枉过正了。
我脑海中突然出现的另一个想法是，您可以尝试检测您是否位于屏幕底部，然后添加一个容器来容纳屏幕的总高度，这应该可以解决闪烁问题，您最终会出现空白区域在页面底部。
PS：如果您找到解决此问题的好方法，我将非常有兴趣听到。
Did you try detecting if the window is scrolled and centering or moving the window.
This only happens when the window is scrolled all the way down and the content get smaller so you don't need to scroll anymore, the scroll bar / window is changing in height and starts to flicker. But i guess this might be a bit of an overkill.
Another idea that just popped in my head, you could try to detect if your at the bottom of the screen and just add a container that will hold the total height of the screen, this should fix the flickering you will end up having a blank space at the bottom of the page.
P.S.: if you find a good solution to this problem i would be very interested to hear it.