jQuery摺疊功能

Question

我是新來javascript和jquery，我試圖實現使用jquery手風琴，我試圖做的是在頁面上加載第一個面板應該打開和其餘面板應關閉，當我點擊下一節第一個面板的第二個面板應該打開，首先應該關閉，當我點擊第二個面板的下一個部分時，第一個和第二個應該關閉，當我點擊最後一個面板時首先應該打開，剩下的應該關閉。 這是我的代碼JsFiddle

Answer 1

你爲什麼不試試jQuery UI，

JSFiddle

這裏Reference 下面是一些代碼，

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
     <button id="first">Next Session</button> 
    <p> 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
    </div> 
    <h3>Section 2</h3> 
    <div> 
     <button id="second">Next Session</button> 
    <p> 
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
    suscipit faucibus urna. 
    </p> 
    </div> 
    <h3>Section 3</h3> 
    <div> 
     <button id="third">First Session</button> 
    <p> 
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
    </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 

</div> 

jQuery的：

$(function() { 
    $("#accordion").accordion({ active: 0 }); 
    $("#first").click(function(){ 
    $("#accordion").accordion("option", "active", 1); 
    }); 
    $("#second").click(function(){ 
    $("#accordion").accordion("option", "active", 2); 
    }); 
    $("#third").click(function(){ 
    $("#accordion").accordion("option", "active", 0); 
    }); 

}); 

更新：

我創建了按照不jQuery UI的http://jsfiddle.net/dhana36/UYbMH/8/ JsFiddle

$("#nextsection").click(function(){ 

    $(".panel__body:eq(0)").toggle('slow'); 
    $(".panel__body:eq(1)").toggle('slow'); 
}); 
$("#nextsection1").click(function(){ 

    $(".panel__body:eq(1)").toggle('slow'); 
    $(".panel__body:eq(2)").toggle('slow'); 
}); 
$("#nextsection2").click(function(){ 

    $(".panel__body:eq(2)").toggle('slow'); 
    $(".panel__body:eq(0)").toggle('slow'); 
});