我在我的页面顶部用 html 创建了一个简单的 JQuery Accordion ，问题是每次我单击一个框向下滑动时，页面再次移动到最顶部。我不明白为什么会发生这种情况，并且花了无数个小时来确定它是 css 问题还是 JQuery。
我是一个 JQuery 菜鸟，所以我不确定是否有特定的控件可以解决这个问题。
我将提供我的代码(页面上还有一个内容 slider ):
CSS
.clear
{
clear:both;
}
body
{
background: #0B0909;
min-height: 200px;
}
.wrap
{
width:940px;
padding:10px;
margin:50px auto;
font-family: Arial, Helvetica, Times;
/* border: 3px ridge #FFDA00; */
}
.header
{
background: #0B0909;
color:#fff;
padding: 25px;
font-family: 'Special Elite', Arial, serif;
font-weight: 400;
text-align: center;
}
.sliderFade
{
position:relative;
width:940px;
height: 300px;
}
.sliderFade img
{
position:absolute;
left:0;
top:0;
border: 5px solid #FFDA00;
width:930px;
height: 295px;
}
#container1
{
position:relative;
width:940px;
height: 200px;
}
dl, dt, dd, ul, li, a
{
margin: 0;
padding: 0;
}
a
{
text-decoration: none;
font-size: 20px;
color: #0B0909;
outline: none;
font-family: 'Special Elite', Arial, serif;
}
li
{
padding-left: 2px;
list-style-type: none;
border-left: 3px solid #FFDA00;
border-right: 3px solid #FFDA00;
border-bottom: 3px solid #FFDA00;
background-color: white;
height: 200px;
}
dl
{
width: 300px;
position:relative;
}
dt
{
padding-top: 4px;
background-color: #FFDA00;
border-left: 3px solid #FFDA00;
border-right: 3px solid #FFDA00;
border-bottom: 3px solid #CDCDCD;
}
dt a
{
color: #0B0909;
font-size: 30px;
font-family: 'Special Elite', Arial, serif;
}
.footer
{
background: #0B0909;
color:#fff;
padding: 25px;
font: 0.8em, serif;
height: 100px;
border-top: 3px solid #FFDA00;
}
JQuery
$(function() { //Hide all images except the first in content slider $('.sliderFade :gt(0)').hide(); setInterval(function() { $('.sliderFade img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.sliderFade'); //$('#star').clone().animate({height:"30px"}).appendTo('.outside'); }, 4000); //hide all sub-windows on load $("dd:not(:first)").hide(); //slide the window up on click $("dt a").click(function() { $("dd").slideUp("slow"); $(this).parent("dt").next("dd").slideDown("normal"); }); });
HTML
<body>
<div class="outside">
<img id= "star" src="star.png" height="10px" width="15px">
</div>
<div class="wrap">
<div class="header" >
<h1> My web app </h2>
</div>
<div class="sliderFade">
<img id = "1stImage" src="space2.jpg">
<img id = "2ndImage" src="space.jpg">
<img id = "3rdImage" src="paint-types.jpg">
</div>
<div class="clear" />
<div id="container1">
<dl>
<dt><a href="#">Home</a></dt>
<dd>
<ul>
<li><a href="#">link 1</a></li>
</ul>
</dd>
<dt><a href="#">Blog</a></dt>
<dd>
<ul>
<li><a href="#">link 1</a></li>
</ul>
</dd>
<dt><a href="#">Contact</a></dt>
<dd>
<ul>
<li><a href="#">link 1</a></li>
</ul>
</dd>
</dl>
</div>
<div class="footer">
<dt><a href="#">Blog</a></dt>
<dd>
<ul>
<li><a href="#">link 1</a></li>
</ul>
</dd>
<dt><a href="#">Contact</a></dt>
<dd>
<ul>
<li><a href="#">link 1</a></li>
</ul>
</dd>
</div>
</div>
</body>
谢谢。
最佳答案
在点击事件中加入return false...
$(function()
{
//Hide all images except the first in content slider
$('.sliderFade :gt(0)').hide();
setInterval(function()
{
$('.sliderFade img:first-child').fadeOut().next('img').fadeIn().end().appendTo('.sliderFade');
//$('#star').clone().animate({height:"30px"}).appendTo('.outside');
}, 4000);
//hide all sub-windows on load
$("dd:not(:first)").hide();
//slide the window up on click
$("dt a").click(function()
{
$("dd").slideUp("slow");
$(this).parent("dt").next("dd").slideDown("normal");
return false;
});
});
希望这能奏效...
关于javascript - JQuery Accordion 在点击时一直移动到页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19543821/