设置JQuery accordion选项卡的行为很奇怪

所以我有一个

div

，我在这里制作了一个手风琴：

<div id="accordion">
        <h3><a href="#">Process Details</a></h3>
        <div>
            <span style="display:none;" id="dialogProcessId"></span>
            <b>Process:</b> <span id="dialogProcess"></span><br />
            <b>Run Time:</b> <span id="dialogRunTime"></span><br />
            <b>Running:</b> <span id="dialogRunning"></span><br />
            <b>Percent Completed:</b> <span id="dialogPercent"></span><br />
            <b>Status:</b> <span id="dialogStatus"></span><br />
            <b>Start Time:</b> <span id="dialogStart"></span><br />
            <b>Finish Time:</b> <span id="dialogFinish"></span><br />
            <b>Errors:</b> <span id="dialogErrors"></span><br />
            <b>Messages:</b> <span id="dialogMessages"></span><br />
            <b>Parameters:</b> <span id="dialogParameters"></span><br />
            <b>Dependencies:</b> <span id="dialogDependencies"></span>
        </div>
        <h3><a href="#">Edit Parameters</a></h3>
        <div>
            <table id="paramsTable">
                <tr>
                    <th style="display:none;"></th>
                    <th>Name</th>
                    <th>Value&nbsp;<span id="editParamValues" style="color:Blue; cursor:pointer; font-size:smaller;">Edit</span></th>
                    <th>Type</th>
                </tr>
            </table>
        </div>
        <h3><a href="#">View Dependencies</a></h3>
        <div>
            <table id="dependenciesTable">
                <tr>
                    <th>Run ID</th>
                    <th>Process Name</th>
                </tr>
            </table>
        </div>
        <h3><a href="#">View Messages</a></h3>
        <div style="overflow:scroll;">
            <table id="messagesTable">
                <tr>
                    <th>Time Stamp</th>
                    <th>Message</th>
                    <th>Message Type</th>
                    <th>Exception</th>
                    <th>Inner Exception</th>
                    <th>Email</th>
                </tr>
            </table>
        </div>
    </div>

但是，这个手风琴

div

位于另一个

div

中，该对话框变成了一个JQuery UI对话框，如下所示：

<div id="detailsDialog">
    <div id="accordion">

$("#detailsDialog").dialog({
        autoOpen: false,
        title: 'Details',
        height: 550,
        width: 800,
        modal: true,
        buttons: {
            "Clear History": function () {
                clearHistory($('#dialogProcessId').text());
            },
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });

方法

refreshDialog

只需进行一个AJAX调用，并在accordion

div

中填充所有不同的

div

、

span

和

text

值，然后打开对话框

我试图在这个

openDialog（）

方法中设置手风琴的索引，但当我这样做时，它会使它变得很小，就像半开的一样，而且看起来很奇怪，当我尝试切换到另一个手风琴索引时，它们都非常小。我通过将这行代码放入

openDialog

：

$( "#accordion" ).accordion( "option", "active", 1 );

---

我做错什么了吗？

我想你需要在打开对话框后调用

手风琴。看看这个，告诉我这是否解决了你的问题或有帮助。如果我误解了，请告诉我
 我想你需要在打开对话框后调用
手风琴。看看这个，告诉我这是否解决了你的问题或有帮助。如果我误解了，请告诉我
 我找到了解决办法。每次我都必须在
openDialog
中销毁并重新创建手风琴，否则它会在另一个手风琴中重新创建手风琴

基本上就是这么简单：

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

我找到了解决办法。每次我都必须在
openDialog
中销毁并重新创建手风琴，否则它会在另一个手风琴中重新创建手风琴

基本上就是这么简单：

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

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