如何同步 CSS 和 JavaScript 以獲得響應式布局？ （變量和@media）

Question

我使用 JQuery 和 CSS 為 web 應用程序創建了一個菜單。 這基本上包括四種狀態：隱藏（移動）、最小化（桌面）、小（桌面）和大（移動）。

在重新加載 web 頁面（它是 PHP）時，無論用戶是否激活了菜單，都會初始化一個 cookie。

問題是如果瀏覽器調整大小，CSS 會刪除菜單（顯示：無）。 JQuery 當然不知道這種情況，因為我不會在運行時更改變量（cookies）。

那么，我如何才能真正同步 JavaScript 和 CSS？ 或者我應該只使用一種語言 go 嗎？ 這是一些代碼。 感謝一些問題，我真的很感激解決這個問題的好方法！

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
}

Answer 2

所以我用下面的代碼解決了這個問題：

function MainMenu() {
    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");
        }
      }
    }

/* _________________ PRE-LOADING USER-SETTINGS & COOKIE HANDLING __________________ */

$(document).ready(function(){
    MainMenu();
});

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

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