jquery - 滑动切换菜单隐藏

Question

我用过以下

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

当在移动设置中查看我的页面时，有一个向下滑动的导航。#nav 在 CSS 中有 display:none ，所以display:block当我单击#button.

但是，如果我不先“关闭”导航（或重新单击#button）并调整窗口大小，#nav则会保留display:block并显示超过 479 像素。我已经尝试过类似的东西

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

它没有用。有任何想法吗？

Answer 1

做这样的事情：

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会出现）

Answer 2

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

编辑：仅当您仍然希望 div 显示时，才不要扩展整个宽度。如果您希望它在窗口宽于 459 时消失，请参阅另一个答案。