0

私は以下を使用しました

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

私のページがモバイル設定で表示されたときに下にスライドするナビゲーションを用意します。#nav には CSS に display:none があるためdisplay:block、#button.

ただし、最初にナビゲーションを「閉じ」(または再クリック#button) せずにウィンドウのサイズを変更すると、#navが残りdisplay:block、479px を超えて表示されます。私はの線に沿って何かを試しました

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

そしてそれはうまくいきませんでした。何か案は？

4

2 に答える 2

0

次のようにします。

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');  
     } 
 }

Fiddle: http://jsfiddle.net/8m5By/ (サイズ変更を試みると、div が表示されます)

于 2013-07-23T16:32:16.017 に答える