Question

我正在建立一个响应式网站，我在调整大小时遇到了一些问题。我在ww＆lt; 1280，ww＆lt; 1024，ww＆lt; 640处使用媒体查询，然后使用Jquery函数控制元素。

加载文档时，媒体查询和功能运行良好。但是，当我尝试一些jquery函数然后调整窗口大小时，会出现很多问题。

我写的一个函数是，

var menuOpen = function() {
  var ctryBtn = $(".countryMenu input[type=button]");
  var ctryMenu = $(".countryMenu");
  var subGnb = $("#subGnb");
  var gnbBtn = $("#header button.mobileGnbBtn");
  var myGnb = $("#gnb");
  var schBtn = $(".mobileFindBtn");
  var schMenu = $(".utilMenu");
  var gnbDown = function () {
    $("#gnb ul").append("<li class='mobileSiteMap'><a href='siteMap.html'>Site Map</a></li>");
    myGnb.slideDown(500,function () {
      $(".mobileGnbBtn").css({
        "width":"37px",
        "height":"37px",
        "background-image":"url(image/common/btn-close-mobile.png)",
        "background-size":"cover"
      });
    });
  };
  var gnbUp = function () {
    if ($(window).width() <= 623) {
      myGnb.slideUp(500, function () {
        $(".mobileSiteMap").remove();
        $(".mobileGnbBtn").css({
          "width":"43px",
          "height":"37px",
          "background-image":"url(image/common/btn-menu-mobile.png)"
        });
      });
    } else {
      $(".mobileSiteMap").remove();
      return false;
    }
  };
  ctryBtn.on("click", function () {
    if(isSubGNB === false){
      subGnb.slideDown(500);
      isSubGNB = true;
    } else {
      subGnb.slideUp(500);
      isSubGNB = false;
    }
  });

  gnbBtn.on("click", function () {
    if(isGNB === false){
      if(isSubGNB === true || isSearch === true){
        subGnb.slideUp(500);
        isSubGNB = false;
        schMenu.slideUp(500);
        isSearch = false;
        ctryMenu.fadeIn(300);
      }
      gnbDown();
      isGNB = true;
    } else {
      gnbUp();
      isGNB = false;
    }
  });
  schBtn.on("click", function () {
    if (isSearch === false) {
      if (isGNB === true || isSubGNB === true ) {
        gnbUp();
        isGNB = false;
        subGnb.slideUp(500);
        isSubGNB = false;
      }
      ctryMenu.fadeOut(100);
      schMenu.slideDown(300);
      isSearch = true;
    } else {
      schMenu.slideUp(100);
      isSearch = false;
      ctryMenu.fadeIn(300);
    }
  });
};

#gnb绝对定位于ww＆lt; 640，不可见（display：none），并且不同的子元素设置为另一个ww尺寸。
#gnb相对位于上方640px ww。

然后我写了resize事件，如：

$(window).on("resize", function () {
  var gnbPC = function () {
    $("#gnb").css({
      "width":"410px",
      "height":"76px",
      "letter-spacing":"-0.04em",
      "margin-left":"26.866%"
    });
  };
  var toggleMobile = function () {
    if ($(window).width() <= 623 ) {
      $("#subGnb").css({"display":"none"});
    } else {
      gnbPC();
      $("#subGnb").css({"display":"none"});
    }
  };
  clearTimeout(timer);
  timer = setTimeout(toggleMobile, delta);
});

我设置var delta = null; var timer = null;

在640px ww下，当我点击按钮时，#gnb slideDown，并且滑动得很好。
当#gnb slideUp时，我尝试调整大小到640px，
没有#gnb，因为当slideUp（）完成时它已经不可见了。

所以我尝试给它设置CSS（CSS的默认值为ww> 640），
但它是内联编写的，然后mediaQuery无效。

我想要一些解决方案，当我尝试调整大小窗口时，
函数工作然后重新加载为ww size的默认设置或者，解决这个调整大小的问题。

我希望在调整大小时重置，
如果#gnb打开，那么我尝试调整大小，我希望它关闭然后更改为ww size的默认设置。

调整大小事件工作时，如何使用jQuery函数和媒体查询更改元素的样式

0 个答案: