javascript - 在元素加载之前更改 CSS

Question

目标:我有一个主导航栏，在单击时打开(使用 jquery 和 css 样式 --active)。如果用户将其保持打开状态并导航到站点上的新页面，则导航栏需要保持打开状态，而不是首先看起来是关闭的。

问题:导航栏确实保持打开状态(使用 cookie 记住其状态)，但在采用 --active 类之前会以默认样式(即关闭)短暂显示。看起来很笨重，就像一个快速的闪光灯。

谁能想出一种方法让导航栏在页面之间记住它的状态并且(当 cookie 被“打开”时)采用 --active 类样式而不简单地显示默认值那些？

(我看过 How to change CSS property before element is created? ，但它对我不起作用)。

$(document).ready(function() {
  const menuButton = $('.header__menu-button');
  const menuState = Cookies.get('menuState');

  if (menuState == 'opened') {
    menuButton.addClass('--active');
  };

  menuButton.on('click', function() {
    $(this).toggleClass('--active');

    if (menuButton.hasClass('--active')) {
      Cookies.set('menuState', 'opened');
    } else {
      Cookies.set('menuState', 'closed');
    }
  });
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #dcdcdc;
}

.header {
  height: 110px;
  background-color: #add8e6;
}

.header__button-container {
  display: flex;
  justify-content: flex-end;
}

.header__menu-button {
  min-width: 100px;
  height: 110px;
  background-color: #fff;
  color: #000;
}

.menuTransition {
  transition: all 1s ease-in-out;
}

.header__menu-button.--active {
  min-width: 250px;
  background-color: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <div class="header__button-container">
    <button class="header__menu-button menuTransition"></button>
  </div>
</div>

Answer 1

如果在新页面菜单中 --active 在 $(document).ready(function()

之前使用此代码

$("button.header__menu-button").removeClass("--active");

此代码从您的导航栏中删除 --active 类!在您看到页面之前。

$(document).ready(function() {
  $("button.header__menu-button").click(function() {
    $(this).toggleClass("--active");
  })
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #dcdcdc;
}

.header {
  height: 110px;
  background-color: #add8e6;
}

.header__button-container {
  display: flex;
  justify-content: flex-end;
}

.header__menu-button {
  min-width: 100px;
  height: 110px;
  background-color: #fff;
  color: #000;
}

.menuTransition {
  transition: all 1s ease-in-out;
}

.header__menu-button.--active {
  min-width: 250px;
  background-color: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div class="header">
  <div class="header__button-container">
    <button class="header__menu-button menuTransition"></button>
  </div>
</div>