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

它适用于实际项目中的一些问题（在谷歌浏览器中），我想知道是否有更好的方法来做到这一点？

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

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

1 个答案: