jquery - 可见性切换中的相关元素位置

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')
});

演示:Fiddle