手風琴向下滾動，當我們通過手風琴導航

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