Question

我有一个html文件，其骨架如下：

   <div id ="QBForm">
      <h3>Query1</h3>    
      <div class ="QBSubForm">...</div>
    </div>

我有一个＆＃34; AddQuery＆＃34;按钮，点击它，我想在现有表格中添加另一个子表格，以及我如何做到这一点：

    $("#AddQuery").click(function (event) {
        var querysubform = $(".QBSubForm").html();                
        $("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");                
    });

我在jQuery Ready（）函数中有这个：

 $("#QBForm").accordion();

但每次，我点击我的添加查询按钮，子窗体被添加但它不可折叠，它只是它自己的静态东西。

如何添加子表单并使每个子表单都可折叠？

Answer 1

你应该尝试将accordion传递给active：false和collapsible：true。

我还没有真正测试下面的代码，但请尝试：

 $("#QBForm").accordion({ active: false, collapsible: true });

如果你没有将collapsible设置为true，jQuery UI将至少设置一个部分打开。

Answer 2

使用手风琴的refresh方法添加动态添加的内容。

然后，如果您想要打开新部分，您还可以使用-1作为索引将最后一个面板设置为活动

$("#AddQuery").click(function (event) {
    var querysubform = $(".QBSubForm").html();                
    $("<h3>Query2</h3>" + querysubform).appendTo("#QBForm");

     /* only refresh*/
     $("#QBForm").accordion('refresh');  

     /* refresh and set new panel active */
    $("#QBForm").accordion('refresh').accordion( "option", "active", -1 );; 

});

Accordion Refresh docs()

如何在Web表单上动态添加可折叠div元素

2 个答案: