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！！），让我们用它做自己的事情：）