页面重新加载后我的侧导航栏不会折叠

Question

我有一个使用 HTML、SCSS 和 js 的侧边导航栏。当我点击重新加载时，它会进入展开状态。

HTML

<nav class="nav" id="myNav">
    <button class="nav__toggle" id="toggle-btn">
        <span class="hamburger"></span>
    </button>
    <ul>
        <li class="brand">
            <a href="">
                <img src="/images/logo.png" class="img-fluid" alt="NC Designs logo">
            </a>
        </li>
        <li><a href="#creative">My creatives</a></li>
        <li><a href="#about">About me</a></li>
        <li><a href="#portfolio">My Portfolio</a></li>
        <li><a href="#clients">Clients</a></li>
        <li><a href="#testimonials">Testimonials</a></li>
        <li><a href="#contact">Contact me</a></li>
    </ul>
</nav>

SCSS

.nav {
  position: absolute;
  text-align: center;
  right: 0;
  width: 260px;
  height: 100vh;
  background: var(--clr-light);
  box-shadow: 0 0 3em #00000026;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.5, 0, 0.5, 1);

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    .li:nth-child(0){
      margin-bottom: 1rem!important;
    }

    li {
      margin-bottom: 2em;
      display: flex;
      
      a {
        text-decoration: none;
        color: var(--clr-dark);
        padding: .5em;
        flex: 1;
        &:hover {
          text-decoration: underline;
          color: var(--clr-primary);
        }
      }
    }
  }
}
.brand{
  margin-top: 2em;
}
.brand img{
  height:100px
}
.nav__toggle {
  position: absolute;
  top: 2em;
  left: 0;
  transform: translateX(-100%);
  background: var(--clr-light);
  padding: 1em 0.5em;
  border: 0;
  border-radius: 0.25em 0 0 0.25em;
  cursor: pointer;
  transition: left 600ms ease-in-out, padding 500ms,
    transform 3500ms ease-in-out, opacity 200ms linear;
  &:focus {
    outline: 0;
    box-shadow: 0 0 0 1px rgba(238, 99, 82, 0.5);
  }
}

.hamburger {
  display: block;
  position: relative;
  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 0;
  }
  &::before {
    bottom: 6px;
  }
  &::after {
    top: 6px;
  }
}

.hamburger,
.hamburger::before,
.hamburger::after {
  width: 2em;
  height: 3px;
  background: var(--clr-dark);
  transition: transform 350ms ease-in-out, opacity 200ms linear;
}

/* Navigation open styles */
.nav-open {
  .nav {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  /* Change this stuff below */
  .hamburger {
    -webkit-transform: rotate(45deg) scale(0.7);
    transform: rotate(45deg) scale(0.7);
    &::before {
      opacity: 0;
    }
    &::after {
      transform: rotate(90deg) translate(-6px) scale(1);
    }
  }
  .nav__toggle {
    position: absolute;
    top: 2em;
    left: 98%;
    transform: translateX(-100%);
    background: var(--clr-light);
    padding: 1em 0.1em;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
    margin-bottom: 50px;
    &:focus {
      outline: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(238, 99, 82, 0.25), 0 0 0.5em rgba(0, 0, 0, 0.25);
    }
    &:hover {
      outline: 0;
      border-radius: 50%;
      box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.55);
    }
  }
}

JS

<script>
    const navToggle = document.querySelector('.nav__toggle');
    const navFocus = document.querySelector('nav ul li a');

    navToggle.addEventListener('click', () => {
        document.body.classList.toggle('nav-open');
    });

    /* 
       Allow the toggle to work if the tab key is used to access menu...
       I'm not sure if this is the best way or if it works all the time.
       I tried experimenting with keyup and the keycode but this seemed simple.
    */
    navFocus.addEventListener('focus', () => {
        document.body.classList.toggle('nav-open');
    });
</script>

repo link

注意：当我第二次点击刷新时，导航栏打开（未折叠），这不应该发生（即使我从未折叠状态（打开）重新加载也应该保持折叠状态导航栏状态）。我该怎么办？

Answer 1

如果您要重新加载页面，此行为是预期的。但是，如果你想覆盖它，你需要一种方法来保存页面刷新之间的状态。我认为您应该看一下 sessionStorage API： https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

有几件事可以为您指明正确的方向：当你加载页面时，你应该访问侧边栏的状态。我认为 opened 或 closed 足以记住侧边栏的状态。类似于：

const navBarKey = "navBarState"; // using variable to prevent typos
const navBarState = sessionStorage.getItem(navBarKey);
const open = "open"; // using variable to prevent typos
const navOpen = 'nav-open'; // using variable to prevent css class typos

if(navBarState === open){
 // this code will run when first started. If not, you may need to add some window.onload logic. 
 // if the saved state is open, add 'nav-open'
 body.classList.add(navOpen);
}

const navToggle = document.querySelector('.nav__toggle');
navToggle.addEventListener('click', () => {
 
 if(body.classList.contains(navOpen)) {
   // if already open, remove 'nav-open' and remove 'navBarState' from sessionStorage
   body.classList.remove(navOpen);
   sessionStorage.removeItem(navBarKey)
 } else {
   // if not open, add 'mav-open' and add 'navBarState' to sessionStorage
   body.classList.add(navOpen);
   sessionStorage.setItem(navBarKey, open)

 }
});

sessionStorage 将仅在 window/tab 打开时持续存在，并且如果您退出浏览器将清除。 localStorage，但是，即使在浏览器关闭后仍会存在。所以，如果你想在重启浏览器后继续保存，你应该改用 localStorage。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

我希望这足以让您入门！当然，有不同的方法来处理 this/refactoring 机会，但对于您手头的给定代码，这应该足够了。

Answer 2

问题出在绝对定位上。

导航在重新加载后失去其绝对位置。将 nav 的位置更改为 fixed 后，它起作用了。不需要 Javascript 更改。

.nav {
  position: fixed;
}

谢谢！

页面重新加载后我的侧导航栏不会折叠

My Side navbar doesn't collapse after page reload

html

javascript

sidebar

sidenav

scss-mixins