JQuery手风琴不断移动到页面顶部点击

我在html页面的顶部创建了一个简单的JQuery手风琴，问题是每次我点击一个框向下滑动页面时，都会再次移动到顶部。我不明白为什么这会发生，并花了无数小时来确定它是一个CSS问题还是JQuery。JQuery手风琴不断移动到页面顶部点击

即时通讯JQuery小白所以我不知道是否有一个特定的控件来解决这个问题。

我会提供我的代码（也有页面上的内容滑块）：

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>

谢谢。

来源

2013-10-23 Master Yoda

什么是HTML – Keith

@Keith基思嗨，我刚刚更新的问题与HTML mark-感谢您的回复。 K.T –

添加返回click事件假...

$(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; 
       }); 
      });

希望这将工作...

来源

2013-10-23 14:20:00 Sikander

谢谢你，这是一个很大的帮助 –

您需要使用return false或preventDefault()才能停止锚点链接在点击时运行。

来源

2013-10-23 14:09:29 isherwood

谢谢伊尔伍德解决了这个问题，我在底部添加了返回虚假陈述，并解决了问题。 –

JQuery手风琴不断移动到页面顶部点击

回答

相关问题