jQuery隱藏/顯示偏移量問題

Question

我在我的網站上有一個導航欄，對於所有按鈕都顯示在手機設備上太寬。所以我想在導航按鈕距離視口的偏移量小於150像素時隱藏（一個下拉菜單會佔據它的位置）。如果偏移超過150像素，則需要顯示導航欄。

我做了一個Fiddle，顯示我想要的（調整窗口大小）。它正確隱藏了視圖中的導航欄，但如果偏移量大於150，它將不會再次顯示。

我知道發生這種情況的原因是元素獲取寬度「auto」，因此無法檢查條件，但我不知道這個解決方法。

我該如何解決這個問題？謝謝。

HTML

<div> 
    <div class="container"> 
     <div class="item">Some</div> 
     <div class="item">Example</div> 
     <div class="item">Text</div> 
    </div> 
</div> 

CSS

div { 
    background: red; 
    text-align: center; 
} 

.container { 
    display: inline-block; 
    background: green; 
} 

.item { 
    display: inline-block; 
    background: green; 
} 

JS

$(window).on('resize', function(){ 
    var offset = $('.container').offset(); 
    if (offset.left < 150) { 
     $('.container').hide(); 
    } else { 
     $('.container').show(); 
    } 
}).resize(); 

Answer 1

出現這種情況的原因是，一旦你隱藏了一些東西，它不再被渲染，因此它不知道容器的.offset（）。

也許嘗試css「知名度」，而不是？

參見：http://jsfiddle.net/hnwacrzq/5/

$(window).on('resize', function(){ 
    var offset = $('.container').offset(); 
    console.log(offset); 
    if (offset.left < 150) { 
     $('.container').css("visibility", "hidden"); 
    } else { 
     $('.container').css("visibility", "visible"); 
    } 
}).resize();