Question

所以我有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>

我把它变成了一个像这样的手风琴：

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

然而，这个手风琴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");
            }
        }
    });

然后我用我的方法在我的应用程序中打开对话框：

function openDialog(id) {
      //$("#accordion").accordion("option", "active", 0);
      refreshDialog(id);
      $("#detailsDialog").dialog("open");
      $('#accordion').mask('Loading...');
  }

方法refreshDialog只是进行AJAX调用并填写手风琴div中的所有不同span，text和div值，然后打开对话框。

我尝试在这个openDialog()方法中设置手风琴的索引，但是当我这样做时，它会使它全部变小，就像半开一样，看起来很奇怪，当我尝试切换到另一个手风琴指数它们都非常小而且很重要。我把这行代码放在openDialog：

中

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

我做错了吗？

Answer 1

我找到了解决方案。我不得不每次都在openDialog摧毁并重新制作手风琴，否则它会在另一支手风琴中重新制作手风琴。

基本上就像这样简单的事情：

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

Answer 2

我认为您需要在打开对话框后调用accordion。看看这个jsfiddle并告诉我这是否能解决您的问题或帮助。如果我误解，请告诉我。

设置JQuery手风琴选项卡很奇怪

2 个答案: