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

Question

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

我是一个JQuery noob所以我不确定是否有一个特定的控件来解决这个问题。

我将提供我的代码（页面上还有一个内容滑块）：

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>

谢谢。

Answer 1

在点击事件中添加返回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;
              });
          });

希望这会奏效......

Answer 2

您需要使用return false或preventDefault()来阻止锚点链接在单击时运行。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-10-23 14:20:00

解决方案2
0 2013-10-23 14:09:29

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-10-23 14:20:00

解决方案2 0 2013-10-23 14:09:29

解决方案1
2 已采纳 2013-10-23 14:20:00

解决方案2
0 2013-10-23 14:09:29