手风琴向下滚动，当我们通过手风琴导航

Question

我有一个手风琴，这将有3 - 当点击任何手风琴的4个元素和内容各手风琴将显示在手风琴的手风琴

让我们说我有手风琴..

ONE 
TWO 
THREE 

默认手风琴应在最后一个手风琴之后元素显示展开内容

像

ONE (This is active on page load) 
TWO 
THREE 
accordion contents should show up here & for other shoul also show up here when a user 

点击任何手风琴（ONE，TWO。三）

小提琴http://jsfiddle.net/gmcLnowa/9/

<div class="header"> this is a header</div> 
<div class="contents"> <p>Page text will be here </p> 
<p>Page text will be here </p> 
<p>Page text will be here </p> 
<p>Page text will be here </p> 
<p>Page text will be here </p></div> 
<div id="accordion"> 
    <ul> 
     <li> <a href="#one">Example one</a> 

     </li> 
     <li> <a href="#two">Example two</a> 

     </li> 
     <li> <a href="#three">Example three</a> 

     </li> 
    </ul> 
    <div id="one" class="accordion">ONE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.</div> 
    <div id="two" class="accordion">TWO Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.</div> 
    <div id="three" class="accordion">THREE Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.</div> 
</div> 

它默认了作为click事件滚动时，会引发出第一手风琴的内容。在手风琴之间导航时如何停止滚动。

Answer 1

你的问题实在是非常误导的，因为这是再不是accordion。

但是为了补救您的滚动问题，这是因为您正在使用目标锚（http://www.w3.org/TR/WD-html40-970917/struct/links.html）作为链接，并且默认行为是跳转到引用的位置。

您需要做的是将href更改为其他属性，如data属性，然后做出相应的反应。

演示：http://jsfiddle.net/gmcLnowa/12/

CSS改为：

a[data-mytarget="#one"].active{ 
    background:blue !important; 
} 
a[data-mytarget="#two"].active{ 
    background:red !important; 
} 
a[data-mytarget="#three"].active{ 
    background:yellow !important; 
} 

JS改为：

$("a").click(function(){ 
    $(".active").removeClass("active"); 
    var mytarget = $(this).data('mytarget'); 
    $('.accordion').hide(); 
    $(mytarget).show(); 
    $(this).addClass("active"); 
}) 
$("a:first")[0].click() 

和HTML改为：

<ul> 
    <li> <a data-mytarget="#one">Example one</a> 

    </li> 
    <li> <a data-mytarget="#two">Example two</a> 

    </li> 
    <li> <a data-mytarget="#three">Example three</a> 

    </li> 
</ul> 

Answer 2

您可以使用jquery为基本的简单手风琴尝试以下代码。

$(document).ready(function (e) { 
    $('.item').click(function (e) { 
     if ($(this).next('.item-data').css('display') != 'block') { 
      $('.active').slideUp('fast').removeClass('active'); 
      $(this).next('.item-data').addClass('active').slideDown('slow'); 
     } else { 
      $('.active').slideUp('fast').removeClass('active'); 
     } 
    }); 
}); 

MARKUP

<div class='container'> 
    <div class='item'>Item 1</div> 
    <div class='item-data'> 
     <div>This is the content for Accordion 1</div> 
    </div> 
    <div class='item'>Item 2</div> 
    <div class='item-data'> 
     <div>This is the content for Accordion 2</div> 
    </div> 
    <div class='item'>Item 3</div> 
    <div class='item-data'> 
     <div>This is the content for Accordion 3</div> 
    </div> 
    <div class='item'>Item 4</div> 
    <div class='item-data'> 
     <div>This is the content for Accordion 4</div> 
    </div> 
</div> 

WORKING DEMO