Меню Bootstrap v2.3.2 изменяется после открытия/закрытия

Question

Цель его иметь меню, активируемое кнопкой.

Это меню может содержать любой контент внутри, поэтому он должен адаптироваться в соответствии с его содержимым.

В этом примере у меня есть аккордеон, но может быть просто сеткой или формой, поскольку я делаю ее как виджет начальной загрузки/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/