javascript - 如何为响应式布局同步 CSS 和 JavaScript？ (变量和@media)

Question

我使用 JQuery 和 CSS 为 Web 应用程序创建了一个菜单。这基本上由四种状态组成:隐藏(移动)、最小化(桌面)、小(桌面)和大(移动)。

无论用户在重新加载网页时激活还是停用菜单(它是 PHP)，都会初始化一个 cookie。

问题是如果调整浏览器大小，CSS 会删除菜单(显示:无)。 JQuery当然不知道这种情况，因为我在运行时并没有改变变量(cookies)。

那么，我怎样才能真正同步 JavaScript 和 CSS？还是我应该只选择一种语言？这是一些代码。感谢一些问题，我真的很感激解决这个问题的好方法!

JavaScript

/* ____________ PRE-LOADING USER-SETTINGS & COOKIE HANDLING ___________ */

$(document).ready(function(){
    if (Cookies.get('menuToggled') == '1') {
        if (isMobileDevice()) {
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default
            Cookies.set('menuToggled', '0');
            // I do this because after every initial load, the menu must be closed in mobile view.
        }
        else {
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default
        }
    }
    else {
        if (isMobileDevice()) {
            $('.grid-main').toggleClass("closedMenu");
            $('.main-menu').css("display", "none");

        }
        else {
            $('.grid-main').toggleClass("smallMenu");
            $('nav span').css("display", "none");
        }
    }
});

/* ######################################################### */
/* ##################### DOM FUNCTIONS ##################### */
/* ######################################################### */

/* Menu Toggler */

$(document).ready(function() { 

$( "a.header-burger-menu" ).click(function() {

    $('.grid-main').attr('class', 'grid-main'); // Resets all sub-classes
    $('.grid-main').css('grid-template-columns', ""); // "" Resets to default value 
    $('.main-menu').css("display", "flex");

    if (Cookies.get('menuToggled') == '1') {
        if (isMobileDevice()) {
            $('.grid-main').toggleClass("closedMenu");
            $('.main-menu').css("display", "none");

        }
        else {
            $('.grid-main').toggleClass("smallMenu");
        }

        $('nav span.mobileHandler').css('display', 'none');
        Cookies.set('menuToggled', '0');
    }
    else {
        if (isMobileDevice()) {
            $('.grid-main').toggleClass("bigMenu");
            $('.main-menu').css("display", "flex");
        }
        else {
            $('.grid-main').attr('class', 'grid-main'); // Resets all sub-classes
            $('.grid-main').css('grid-template-columns', ""); // "" resets to default value 
        }

        $('nav span.mobileHandler').css('display', 'block');
        Cookies.set('menuToggled', '1');
      }
});

CSS

/* ################################################# */
/* ############### MOBILE SECTION ################## */
/* ################################################# */

/* CSS - MENU TOGGLER for JQUERY */

.grid-main.smallMenu { 
  /* No empty space between the classes to refer "smallMenu" to "grid-main" */
  grid-template-columns: 80px 1fr 1fr !important;
}

.grid-main.bigMenu {
  grid-template-columns: 100% 0fr 0fr;
}

.grid-main.closedMenu {
  grid-template-columns: 0px 1fr 1fr;
}

@media(max-width: 576px) {

  header h1 {font-size: 2rem;}

  header .header-chat {
    width: 50px;
  }

  header .header-login {
    width: 50px;
  }

  .grid-main {
    font-size: .7rem; 
    grid-template-columns: 0px 1fr 1fr;
    grid-template-rows: 0.1fr 1fr 0.08fr;
  }

  nav .main-menu {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left; /* Horizontal pseudo centering */
    align-content: flex-start; /* Vertical pseudo centering */
    justify-items: center;
    margin: 40px 10px 0px 10px;
    overflow-y: overlay;
  }

  nav .main-menu.mobileHandler {
    display: none;
  }

  nav span.mobileHandler {
    display: none;
    /* To hide nav textes in closed or small view, only icons */
  }   

Answer 1

在您的 JQuery 脚本中，在执行您尝试执行的任何操作之前，请检查该元素是否被隐藏或页面缩小时发生的任何其他情况。

if($('.element').css('display')=='none'){
    //Do what you gotta do in here
}