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手風琴不斷移動到頁面頂部點擊

回答

相關問題