可见性切换中的相对元素位置

Question

我制作了几个最简单的 jQuery 窗口小部件，可见性由切换按钮控制。

html：

<div class="panel panel-default content-panel">
    <nav class="navbar navbar-default control-panel" role="navigation">
        <div class="btn-group" data-toggle="buttons">
           <label id="Btn1" class="btn btn-default navbar-btn">
            <input type="checkbox"/> Widget 1
          </label>
           <label id="Btn2" class="btn btn-default navbar-btn">
            <input type="checkbox"/> Widget 2
          </label>
          <label id="Btn3" class="btn btn-default navbar-btn">
            <input type="checkbox"/> Widget 3
            </label>  
         </div>
    </nav>
  <div id="widgetsArea" style="height: 91%;">
      <div id="widget1" class="ui-widget-content widget-style">
          <h5 class="ui-widget-header">Widget 1</h5> 
      </div>
      <div id="widget2" class="ui-widget-content widget-style">
          <h5 class="ui-widget-header">Widget 2</h5> 
      </div>
      <div id="widget3" class="ui-widget-content widget-style">
          <h5 class="ui-widget-header">Widget 3</h5> 
      </div>
   </div>   
</div

javaScript：

//set buttons in active
$("#Btn1, #Btn2, #Btn3")
.button('toggle')
.find(':checkbox')
.prop('checked');
$("#Btn1").change(function()
{
    $('#widget1').toggle();
}); 
$("#Btn2").change(function()
{
    $('#widget2').toggle();
});
$("#Btn3").change(function()
{
    $('#widget3').toggle();
});

但是我几乎没有问题：当小部件被隐藏时，其他基础小部件会偏移-http：//jsfiddle.net/wq4c3/15/

我试图通过明确设置小部件位置来解决此问题（http://jsfiddle.net/nesw8/1/）：

$("#Btn1").change(function()
{
    var tp2 = $('#widget2').offset().top;
    var lf2 = $('#widget2').offset().left;
    var tp3 = $('#widget3').offset().top;
    var lf3 = $('#widget3').offset().left;
    $('#widget1').toggle();
    $('#widget2').offset({ top: tp2, left: lf2 });
    $('#widget3').offset({ top: tp3, left: lf3 });
}); 
$("#Btn2").change(function()
{
    var tp1 = $('#widget1').offset().top;
    var lf1 = $('#widget1').offset().left;
    var tp3 = $('#widget3').offset().top;
    var lf3 = $('#widget3').offset().left;
    $('#widget2').toggle();
    $('#widget1').offset({ top: tp1, left: lf1 });
    $('#widget3').offset({ top: tp3, left: lf3 });
});
$("#Btn3").change(function()
{
    var tp1 = $('#widget1').offset().top;
    var lf1 = $('#widget1').offset().left;
    var tp2 = $('#widget2').offset().top;
    var lf2 = $('#widget2').offset().left;
    $('#widget3').toggle();
    $('#widget1').offset({ top: tp1, left: lf1 });
    $('#widget2').offset({ top: tp2, left: lf2 });
});

它在真实项目（在Google Chrome中）中的某些问题作用，我想了解是否有更好的方法来执行此操作？

Answer 1

而不是绝对定位尝试，可见度

//set buttons in active
$("#Btn1, #Btn2, #Btn3")
    .button('toggle')
    .find(':checkbox')
    .prop('checked');
function toggleVisibility(el) {
    $(el).css('visibility', function (i, visibility) {
        return visibility == 'hidden' ? 'visible' : 'hidden'
    });
}

$("#Btn1").change(function () {
    toggleVisibility('#widget1')
});
$("#Btn2").change(function () {
    toggleVisibility('#widget2')
});
$("#Btn3").change(function () {
    toggleVisibility('#widget3')
});

演示：小提琴