2

私はこれを使用しています： 

<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です。

乾杯

4

3 に答える 3

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();
于 2012-11-28T14:53:49.787 に答える
1

例で 更新、つまり、テスト済みで動作中

必要なコードは次のとおりです。問題は、前に述べたように、セクションではなくメイン 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>
于 2012-11-28T14:56:36.443 に答える
1

jQuery UI アコーディオンは、特定の 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>

機能することを期待して、そこにボタンを叩くだけではいけません。セクションにボタンを配置できます。

于 2012-11-28T14:59:30.303 に答える