Question

如何动态地向jQuery UI的手风琴添加项目？
对于基本的手风琴，$("#accordion").accordion('destroy').accordion();有效，但我设置了一些属性并且还包括可排序的。

<html>
<head>
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>    
</head>
<body>

<script>
$(function()
{
    $("#accordion")
        .accordion({
            header: "> div > h3",
            active:false,
            collapsible:true
        }).sortable({
            axis: "y",
            handle: "h3",
            stop: function( event, ui ) {
              // IE doesn't register the blur when sorting
              // so trigger focusout handlers to remove .ui-state-focus
              ui.item.children( "h3" ).triggerHandler( "focusout" );

              // Refresh accordion to handle new order
              $( this ).accordion( "refresh" );            
            }
        });
});
</script>    

<div id="accordion">
    <div class="group">
        <h3>Section 1</h3>
        <div>
            <p>Content 1</p>
        </div>
    </div>
    <div class="group">
        <h3>Section 2</h3>
        <div>
            <p>Content 2</p>
        </div>
    </div>
    <div class="group">
        <h3>Section 3</h3>
        <div>
            <p>Content 3</p>
        </div>
    </div>
    <div class="group">
        <h3>Section 4</h3>
        <div>
            <p>Content 4</p>
        </div>
    </div>
</div>

<a href="javascript:;" id="btn-AddItem">Add New Item</a>

<script>
$(document).ready(function()
{
    $("#btn-AddItem").on("click", function()
    {
        $("#accordion").append('<div class="group"><h3>New Section</h3><div><p>New Content</p></div></div>');
        //$("#accordion").accordion('destroy').accordion();
    });
});
</script>    

</body>
</html>

Answer 1

你可以添加元素然后refresh你的手风琴：

$('#accordion').append(html);
$('#accordion').accordion("refresh");

动态添加jQuery UI手风琴项目

1 个答案: