如何使用 jQuery 手風琴創建一個 div

Question

我使用這個：

<script>
    $(function() {
        $( "#accordion" ).accordion();
    });
</script>

獲得展開/折疊的效果。 （如果你知道更好的插件或方法，請注意我）

我有這個 div： <div id ="accordion"></div>

這段代碼用於在該 div 內創建一個按鈕。 （不要擔心按鈕的內容）

$('#button_submit').click(function() 
{
$("#accordion").append(
$("<button id=saved"+j+">").click(function() {
drawChart.apply(null, myArray);
}).html("<b>Start date:</b>"+""+myArray[0]+"\n<b>End date:</b>"+myArray[1]+"\n<b>Chart type:</b>"+myArray[2]+"")
);

我的問題是，如何創建/格式化 div 手風琴以獲得這種效果手風琴效果 jquery 。

因為<button id=saved"+j+">應該出現在sections 。

干杯

Answer 1

這是一個非常簡單的手風琴插件..

http://viralpatel.net/blogs/create-accordion-menu-jquery/

$("#accordion > li > div").click(function(){

    if(false == $(this).next().is(':visible')) {
        $('#accordion ul').slideUp(300);
    }
$(this).next().slideToggle(300);
});

$('#accordion ul:eq(0)').show();

Answer 2

更新了示例_{換句話說，經過測試和工作}

這是您需要的代碼。 問題，正如我之前提到的，您是將按鈕添加到主 div 而不是部分。

jsFiddle（工作示例）

Alt 示例（可能更簡潔）

這個允許添加新的手風琴件（里面有按鈕）

• 注意：最后一個棘手的部分是您必須銷毀手風琴並重新創建它，因此如果您有創建手風琴的特定選項，您可能希望將它們包裝在一個單獨的函數中並在銷毀后立即調用它

腳本

$(function() {
    $("#accordion").accordion();

    $("#accordion .ui-accordion-content").each(function(i) {
        $(this).append(
            $("<button />")
                .prop("id", "saved"+j+">")
                .html("<b>Start date:</b>"+""+myArray[0]+"\n<b>End date:</b>"+myArray[1]+"\n<b>Chart type:</b>"+myArray[2])
                .on("click", function(e) {
                    drawChart.apply(null, myArray);
                })
        );
    });
})

確保您的 HTML 布局正確。

示例 HTML

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <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>
        <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>
        <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>
    <h3>Section 4</h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>

Answer 3

jQuery UI Accordion 需要特定的 HTML 結構。

底層 HTML 標記是一系列標題（H3 標簽）和內容 div，因此內容無需 JavaScript 即可使用。

http://jqueryui.com/accordion/

<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <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>
        <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>
</div>

你不能只是在那里敲一個按鈕就期望它起作用。 您可以在部分中放置一個按鈕。