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 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>

你不能只是按一下按钮就期望它起作用。您可以在部分中放置一个按钮。

于 2012-11-28T14:59:30.303 回答