如何在JavaScript手风琴中禁用自动滚动

问题描述

我遇到了我想在我的网站上使用的手风琴：

http://jsfiddle.net/subhranild/u5d35La7/1/

     <div class="accordion">
        <div class="accorfion-section">
            <a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
            <div id="accordion-1" class="accordion-section-content">
                <p>This is first accordion section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
            <div id="accordion-2" class="accordion-section-content">
                <p> this is second accordian section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
            <div id="accordion-3" class="accordion-section-content">
                <p> this is third accordian section</p>
            </div>
        </div>
    </div>



     $(document).ready(function(){
     $('.accordion-section-title').click(function(e){
         var currentAttrvalue = $(this).attr('href');
         if($(e.target).is('.active')){
             $(this).removeClass('active');
             $('.accordion-section-content:visible').slideUp(300);
         } else {
             $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
             $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
         }
     });
 });

但是，只要打开其中一个标题，滚动就会移动，以使打开的内容位于页面顶部。如何编辑此代码以禁用自动滚动？

我在网上看到有人说将href更改为等于＃，但是当我这样做时，手风琴就不再起作用了。

谢谢。

解决方法

只需在Javascript的click函数上添加e.preventDefault();，如下所示。

 $(document).ready(function() {
     $('.accordion-section-title').click(function(e) {
             e.preventDefault();
         var currentAttrvalue = $(this).attr('href');
         if($(e.target).is('.active')) {
             $(this).removeClass('active');
             $('.accordion-section-content:visible').slideUp(300);
         } else {
             $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
             $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
         }
     });
 });

.wrapper {
  height: 100%;
}
.accordion
{
    overflow:hidden;
    border-radius:4px;
    background:#f7f7f7;
}
.accordion-section-title
{
    width:100%;
    padding:15px;
}
.accordion-section-title
{
        width: 100%;
        padding: 15px;
        display: inline-block;
        background-color: #333;
        border-bottom: 1px solid #1a1a1a;
        font-size: 1.2em;
        color: #fff;
        transition: all linear 0.5s;
        text-decoration:none;
}
.accordion-section-title.active
{
    background-color:#4c4c4c;
    text-decoration:none;
    }
    .accordion-section-title:hover
    {
    background-color:grey;
    text-decoration:none;
}
.accordion-section:last-child .accordion-section-title
{
    border-bottom:none;
}
.accordion-section-content
{
    padding:15px;
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <p>
    Lorem ipsum dolor sit amet,consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam,ex temporibus neque aspernatur similique eligendi est harum obcaecati,ipsam velit,quis doloremque expedita,hic! Soluta,omnis itaque optio,inventore,assumenda totam adipisci vel eius,distinctio amet dolorem tempore sit. Accusamus,voluptas! Quam animi,esse soluta porro nesciunt incidunt nisi autem distinctio corrupti,dolores impedit obcaecati. Sequi sit facilis,accusamus neque quod tempore,amet ratione,veritatis commodi,velit necessitatibus dolorum maxime. Facere qui esse,rerum quo nihil,accusamus sint assumenda. Eaque asperiores recusandae,dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
  </p>
   <div class="accordion">
        <div class="accorfion-section">
            <a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
            <div id="accordion-1" class="accordion-section-content">
                <p>This is first accordion section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
            <div id="accordion-2" class="accordion-section-content">
                <p> this is second accordian section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
            <div id="accordion-3" class="accordion-section-content">
                <p> this is third accordian section</p>
            </div>
        </div>
    </div>
    <p>
    Lorem ipsum dolor sit amet,dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
  </p>
</div>