在所有浏览器中，jQuery闪烁在slideUp（）上…附加了示例页面

我知道这已经多次讨论了，但我有一个问题有点不同。 当调用.slideUp（）并向下滚动浏览器风以查看所有底部内容时，当div滑动关闭时，它会闪烁很多次。

示例页面如下所示，只需单击它所说的位置，然后滑动到底部并关闭其中一个上部div。

       $(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); }); });   .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; }    
 
Title Goes Here
 
 
 Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here ... click for more 


 
 
 
 CourseDescription 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 
 For more information, contact: 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 To enroll: 
 Click on a link below and complete the registration form. 
 
 Click on this line 
 
 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 
 
Title Goes Here
 
 
 Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here ... click for more 


 
 
 
 CourseDescription 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 
 For more information, contact: 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 To enroll: 
 Click on a link below and complete the registration form. 
 
 Click on this line 
 
 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 
 
Title Goes Here
 
 
 Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here ... click for more 


 
 
 
 CourseDescription 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 
 For more information, contact: 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 To enroll: 
 Click on a link below and complete the registration form. 
 
 Click on this line 
 
 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 Content Content 
 
 
   

Answer 1

一个简单的解决方法是在关闭可折叠元素之前检查body元素的计算高度，然后将body的计算高度设置为CSS height属性。

 $('div.Accordion > div.collapsePanelHeader').click(function() { var body = $('body'); body.css('height', 'auto'); body.css('height', body.height()); $(this).slideToggle(1000); $(this).next('div.Content').slideToggle(1000); }); 

这会强制身体元素保持其高度，即使在关闭通常会将身体重置/重绘为其早期默认高度的高面板时也是如此。

另请注意，在检查计算的高度之前，CSS高度将重置为auto ，否则jQuery将绕过计算的样式并使用上一次传递期间设置的值。

Answer 2

您是否尝试检测窗口是否滚动并居中或移动窗口。 这种情况只发生在窗口完全向下滚动且内容变小而不再需要滚动时，滚动条/窗口的高度会发生变化并开始闪烁。 但我想这可能有点矫枉过正。

刚出现在脑海中的另一个想法是，您可以尝试检测屏幕底部是否只是添加一个容纳屏幕总高度的容器，这样可以解决闪烁问题，最终会出现空白在页面的底部。

PS：如果你找到了解决这个问题的好方法，我会非常有兴趣听到它。