Question

我使用了以下

$("#button").on("click",function(e){
    $("#nav").slideToggle();
});

要在移动设置中查看我的页面时向下滑动导航。 #nav在CSS中显示：none，因此当我点击display:block时它会有#button。

但是，如果我没有先关闭导航（或重新点击#button）并调整窗口大小，#nav将保持display:block并显示超过479像素。

我尝试了一些东西

$(window).resize(function() {
   if( $(window).innerWidth()>459 && $("#nav").css("display")!=none ) $("#nav").hide();
});

它不起作用。有什么想法吗？

Answer 1

尝试在CSS中将max-width（或常规width）设置为#nav。当显示div时，这将生效。

编辑：只有当你仍然想要显示div时才这样，只是不扩展整个宽度。如果您希望它在窗口宽度超过459时消失，请参阅另一个答案。

Answer 2

做这样的事情：

<强> HTML

<div id="nav"></div>

<强> CSS

#nav{
    width:100%;
    padding:30px;
    background:#1d1d1d;
    display:none;
}

<强>的jQuery

根据窗口的大小，我们将在下面显示DIV：

$(window).resize(setDivVisibility);
function setDivVisibility(){
     if (($(window).width()) < '750'){  //change pixels to match your needs
     $('#nav').css('display','block');  
     } else {  
     $('#nav').css('display','none');  
     } 
 }

小提琴：http://jsfiddle.net/8m5By/（尝试调整大小并显示div）

slideToggle菜单隐藏

2 个答案: