Как я могу синхронизировать CSS и JavaScript для адаптивного макета? (Vars и @media) - PullRequest
Новая
       6

Как я могу синхронизировать CSS и JavaScript для адаптивного макета? (Vars и @media)

0 голосов
/ 10 октября 2019

Я создал меню для веб-приложения, используя JQuery и CSS. Он состоит в основном из четырех состояний: скрытый (мобильный), свернутый (рабочий стол), маленький (рабочий стол) и большой (мобильный).

Файл cookie инициализируется независимо от того, активировал или деактивировал пользователь меню при перезагрузке веб-страницы (это PHP).

Проблема заключается в том, что при изменении размера браузера CSS удаляет меню (отображение: никто). JQuery, конечно, не знает об этом обстоятельстве, потому что я не изменяю переменные (куки) во время выполнения.

Итак, как я могу на самом деле синхронизировать 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 */
  }

Ответы [ 2 ]

1 голос
/ 10 октября 2019

В вашем скрипте JQuery, прежде чем выполнять какое-либо действие, которое вы пытаетесь выполнить, проверьте, скрыт ли элемент или что-то еще, что происходит, когда страница сокращается. 

if($('.element').css('display')=='none'){
    //Do what you gotta do in here
}
0 голосов
/ 10 октября 2019

Итак, я решил проблему с помощью следующего кода: 


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();
});
...