Bootstrap v2.3.2菜单在打开/关闭后改变大小

Question

目标是通过按钮激活菜单。

此菜单可以包含任何类型的内容，因此必须根据其内容进行调整。

在这个例子中我有一个手风琴，但可能只是一个网格或一个表格，因为我将它作为一个bootstrap / jquery小部件。

问题是菜单在打开和关闭几次后会改变尺寸。

我如何改进它以使其适应内容和一致性，因为它将接受不同的内容。

代码 http://jsfiddle.net/fpmsusm5/

使用Javascript：

var button = $('#button');
var dialog = $('#modal');
button.on('click', function () {
    dialog.toggleClass('hide');
    dialog.position({
        my: "right top",
        at: "right-2 bottom",
        of: button
    });
})


$("#openpanel1").on("click", function () {
    var curr_panel = $("#panel1")
    curr_panel.toggleClass('show hide');
    curr_panel.collapse(curr_panel.hasClass('show') ? 'show' :     'hide');
});

...

/* ensure any open panels are closed before showing selected */
$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

HTML：

<div class="pull-right">
    <a id="button" class="btn">Settings</a>
</div>

<div id="modal" class="modal hide" style="overflow-    y:hidden;width:auto;height:auto;max-height:100%; max-width:100% ">
    <div class="modal-body" style="overflow-y:hidden; width:auto;     height:auto; max-height:100%; max-width:100%">
        <div id="accordion">

            <button id="openpanel1" type="button" class="btn"     style="width:100%;text-align:left"><i
                    class="icon-search"></i>Page Information
            </button>
            <div id="panel1" class="collapse">
                <div class="panel-body">
                    Contents panel 1
                </div>
            </div>

            ....

        </div>
    </div>
</div>

感谢您的见解。

Answer 1

每当您定位对话框时，它都会更改left属性，并导致其调整大小。

每次显示/隐藏它时，您都不必重新定位它，您只需执行一次：

var dialog = $('#modal');
dialog.position({
    my: "right top",
    at: "right-2 bottom",
    of: button
});
button.on('click', function () {
    dialog.toggleClass('hide');
});

然后它保持相同的大小。更新了小提琴：http://jsfiddle.net/fpmsusm5/1/