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