我使用 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 */
}
最佳答案
在您的 JQuery 脚本中,在执行您尝试执行的任何操作之前,请检查该元素是否被隐藏或页面缩小时发生的任何其他情况。
if($('.element').css('display')=='none'){
//Do what you gotta do in here
}
关于javascript - 如何为响应式布局同步 CSS 和 JavaScript? (变量和@media),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58324849/