相關元素在可見性切換的位置

我做了幾個最簡單的小工具，其中的可視性由切換按鈕控制。相關元素在可見性切換的位置

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

它與真正的項目中的一些問題（谷歌瀏覽器），我想了解是否有更好的方法來做到這一點？

來源

2014-01-28 gorill

而不是絕對定位的嘗試，能見度

//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

來源

2014-01-28 00:49:05

相關元素在可見性切換的位置

回答

相關問題