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 个答案: