Javascript 如何在不刷新页面的情况下对小型设备进行一些更改？

我正在尝试对小于767px的小设备进行一些更改，但是当我将窗口变大时，我仍然会对小设备进行更改。只有当我刷新页面时，我才能得到我想要的

var screenWidth=jQuerywindow.width； 功能下拉列表组{

---

如果screenWidth要回答关于这个问题的评论，我个人会在多种情况下使用媒体查询事件处理程序，例如添加或删除与视口宽度相关的类，而不重新加载。如果用户调整浏览器视图的大小以将其移到不同的屏幕上，这是很有用的。例如，他不会因为类的不同而显示不好不会被添加或删除，因为页面在不重新加载的情况下更改了大小

为了回答这个问题，我使用以下代码来处理这些事件：

    // media query event handler
      var detectViewPort = function(){
          var viewPortWidth = $(window).width();
       if (viewPortWidth > 767) {
                  // window width is at least 767px
                  $('#wrapper-footer').addClass('fixed-bottom');

 }
     else {
            // window width is less than 768px
          $('#wrapper-footer').removeClass('fixed-bottom');

          }// END media query change
      };

              $(function(){
                detectViewPort();
              });

              $(window).resize(function () {
                 detectViewPort();
              });

---

我让我的添加/删除类示例和您一起定制您自己的行为。

我就是这样做的，它工作得非常完美。 我刚刚在函数中移动了var screenWidth

function dropdownTeam(){
    var screenWidth = jQuery(window).width();
    if(screenWidth <= 767){
        jQuery('.nav-team .container').css('display', 'none');

        jQuery('.nav-team').unbind().click(function(){
            jQuery('.nav-team .container').slideToggle().css('display', 'block');
            jQuery('.text-now').toggleClass('rotate');
        });

    }else{
        jQuery('.nav-team .container').css('display', 'block');
    }
}

jQuery(function(){
    dropdownTeam();
});

jQuery(window).resize(function(){
    dropdownTeam();
});

---

这种技术被称为“响应”，你应该使用它，而不是JSJap，我知道..但是有了点击事件和滑动切换，用JS解决这个问题就更容易了。问题是为什么我必须刷新页面才能看到更改？如果你知道，为什么不这样做呢？这里没有什么不能用CSS在相同的点击处理程序regardl上完成的屏幕大小的ess，这将避免您的问题。如果您确实想在JS中执行此操作，则需要在screenWidth>767时将原始的单击处理程序放回。