我知道这已经讨论过好几次了,但我有一个有点不同的问题。当调用 .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>