Question

我环顾四周，找不到我想要的东西。因此，我使用cookie来记住div的切换状态，无论它是隐藏的还是可见的。我遇到的问题是，当页面刷新发生或我转到另一个链接时，当div从默认状态进入基于cookie的状态时，会发生闪烁。我的任务是调查是否有办法删除闪烁而没有服务器端代码。

这是html

<html>

<head>
  <title></title>
  <meta name="charset" content="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="app.js"></script>
  <! -- getCookie() and setCookie() are loaded from app.js -->
</head>

<body>
  <nav>
    <ul class="list-unstyled">
      <li class="active"><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a></li>
    </ul>
  </nav>
  <a href="#" class="buttonCollapse" id="btn-close"><span class="arrow">&laquo;</span>  </a>
  <a href="#" class="buttonCollapse-open" id="btn-open"> <span class="arrow">&raquo;</span> </a>
  <div class="container side-nav">
    <h1>SideBar that has to hide on click</h1>
  </div>
  <div id="wrapper" class="main">
    <h1>Main Content</h1>
  </div>
</body>

</html>

这是css

body {
  position: relative;
}

.container {
  margin: 20px 20px;
  width: 200px;
  height: 500px;
  background: #ccc;
  display: inline-block;
}

.hideSideNav .side-nav {
  display: none;
}

.hideSideNav #wrapper {
  padding-left: 20px;
}

.main {
  width: 500px;
  height: auto;
  background-color: #f9f9f9;
  display: inline-block;
  position: relative;
  margin: 0 auto;
}

.buttonCollapse {
  font-size: : 25px;
  text-decoration: none;
  position: absolute;
  left: 200px;
  margin-right: 7px;
  margin-top: 5px;
  z-index: 10000;
  opacity: 1;
  text-decoration: none;
}

.buttonCollapse-open {
  font-size: : 25px;
  text-decoration: none;
  position: absolute;
  left: 20px;
  top: 30px;
  z-index: 10000;
  display: none;
}

.buttonCollapse:hover,
.buttonCollapse-open:hover {
  text-decoration: none;
}

span.arrow {
  font-size: 25px;
}

最后这里是getCookie（）setCookie（）和deleteCookie（）函数供您参考，从app.js加载

function setCookie(name, value, expires, path, domain, secure) {
  document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires.toUTCString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie(name) {
  var dc = document.cookie;
  var prefix = name + "=";
  var begin = dc.indexOf("; " + prefix);
  if (begin == -1) {
    begin = dc.indexOf(prefix);
    if (begin != 0) return null;
  } else {
    begin += 2;
  }
  var end = document.cookie.indexOf(";", begin);
  if (end == -1) {
    end = dc.length;
  }
  return unescape(dc.substring(begin + prefix.length, end));
}

function deleteCookie(name, path, domain) {
  if (getCookie(name)) {
    document.cookie = name + "=" +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

这是我的JS。我在body标签

之后立即将它加载到脚本标记中

if (localStorage.getItem('State')) {
  document.body.classList.add('hideSideNav');
} else {
  document.body.classList.remove('hideSideNav');
}

这是代码的其余部分

var btnOpen = "btn-open";
var btnClose = "btn-close";

// Determines which button to show when a page is loaded 
function showElement(elemid) {
  if (elemid != null) {
    document.getElementById(elemid).style.display = "inline-block";
    if (elemid == btnClose) {
      document.getElementById(btnOpen).style.display = "none";
      document.body.classList.remove('hideSideNav');
      [0].classList.remove('hideSideNav');
    } else if (elemid == btnOpen) {
      document.getElementById(btnClose).style.display = "none";
      document.body.classList.add('hideSideNav');
    }
  }
}


// check the state of the cookie and if no cookie is set then set it to visible state 

function checkCookie() {
  var cookieName = getCookie("State");
  var getStatus = (localStorage.getItem('State')) ? localStorage.getItem('State') : getCookie('State');
  if (cookieName != null) {
    showElement(getStatus);
  }
}
window.onload = function() {
  checkCookie();
}
var doc = document;
var openBtn = doc.getElementById('btn-open');
var closeBtn = doc.getElementById('btn-close');

// when you click on the button to hide the side-nav
closeBtn.addEventListener('click', function() {
  document.body.classList.add('hideSideNav');
  closeBtn.style.display = "none";
  openBtn.style.display = "inline-block";
  setCookie("State", "btn-open");
  localStorage.setItem('State', 'btn-open');
});

// when you click on the button to show the side-nav
openBtn.addEventListener('click', function() {
  document.body.classList.remove('hideSideNav');
  openBtn.style.display = "none";
  closeBtn.style.display = "inline-block";
  deleteCookie('State');
  localStorage.removeItem('State');
});

Answer 1

我在身体标记
之后立即将其加载到脚本标记中

此时，浏览器可能已经开始创建DOM / CSSOM，并呈现内容。

尝试将脚本放入HEAD，并在HTML元素（document.documentElement）上设置类而不是BODY。

记住切换状态并避免在没有服务器端代码的情况下重新加载页面上的闪烁

1 个答案: