Question

我的网站上有一个导航栏太宽，无法在移动设备上显示所有按钮。因此，我希望隐藏导航按钮与视口的偏移小于150px（下拉将取消它的位置）。如果偏移量超过150px，则需要显示导航栏。

我制作了一个显示我想要的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＆＃34;可见性＆＃34;代替？

请参阅：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();

jQuery隐藏/显示偏移问题

1 个答案: