Jquery切換窗口大小與媒體查詢錯誤

Question

當窗口大小調整時，我遇到切換按鈕問題。問題是我點擊了顯示項目列表的切換按鈕，然後將其保持打開狀態，但是當調整窗口大小時，切換仍然保持打開狀態，儘管我在媒體查詢上放置了display:none;。

HTML代碼：

<section id="nextprevsection"> 
    <h2 id="nextprev">View more projects?</h2> 
    <ol class="select"> 
    <a href="heritagetrails.html"><li>Previous Project</li></a> 
    <a href="artmovement.html"><li>Next Project</li></a> 
    <a href="work.html"><li>Back to work</li></a> 
    </ol> 
    </section> 

CSS：

.nextprev{ 
display:none; 
} 

#nextprev{ 
display:none; 
font-size:16px; 
width:200px; 
background:url(../img/work/downarrow.png) right no-repeat #333; 
color:#FFF; 
cursor:pointer; 
padding:10px; 
margin:auto; 
margin-top:-150px; 
} 

ol.select { 
display: none; 
background:#666; 
width:220px; 
margin:auto; 
padding:0px; 
list-style-type:none; 

} 

.select{ 
display:none; 
} 
.select a{ 
color:#FFF; 
text-decoration:none; 
} 

ol.select > li:hover { 
background: #aaa; 
} 

jQuery代碼：

  //next previous 
    var nav = $('#nextprev'); 
    var selection = $('.select'); 
    var select = selection.find('li'); 
    if ($(window).width() >= 768) { 
nav.removeClass('active'); 
selection.css("opacity","none"); 
    } 
else{ 
    nav.addClass('active'); 
} 

    nav.click(function(event) { 
    if (nav.hasClass('active')) { 
    nav.removeClass('active'); 

    selection.stop().slideToggle(200); 

    } else { 
    nav.addClass('active'); 
    selection.stop().slideToggle(200); 
    } 
    event.preventDefault(); 
    }); 


    select.click(function(event) { 
    // updated code to select the current language 

    $(".select").css("display","none"); 
    select.removeClass('active'); 
    $(this).addClass('active'); 
    }); 

    </script> 

媒體查詢代碼：

@media screen and (max-width: 768px){ 
/*Next and previous*/ 

#nextandprev{ 
display:none; 
} 


    .select{ 
    display:block; 
    } 

    #nextprev{ 
    display:block; 
    } 

    #nextprevsection{ 
    height:200px; 
    margin-bottom:100px; 
    } 

    } 

Answer 1

那麼，屏幕重新調整大小不一定會調用檢測屏幕大小的代碼。你有一個選擇是設置一個短計時器，定期檢查屏幕大小並調用你的代碼。

但這是蹩腳的答案。嘗試$（window）.resize（function（）{}）;

http://api.jquery.com/resize/

基本上它包裹window.onresize事件（我真的不知道最近離存在的，愚蠢的DOM !!），並讓你用它做自己的事:)