Javascript 使用媒体查询调整窗口大小时的Jquery切换错误

当窗口调整大小时，切换按钮有问题。问题是，我单击了显示项目列表的切换，并将其保持打开状态，但是当我调整窗口大小时，切换仍然保持打开状态，尽管我放置了

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>

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>

嗯，屏幕大小调整不一定会调用检测屏幕大小的代码。您可以选择设置一个短计时器，定期检查屏幕大小并调用代码

但这是一个蹩脚的答案。尝试$（窗口）.resize（函数（）{}）


基本上，它包装了window.onresize事件（老实说，我直到最近才知道它的存在，愚蠢的DOM！！），让你用它做你自己的事情：）
Rock on dude，很高兴听到！
            //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;  
  }

  }