我环顾四周，找不到我要找的东西。所以我使用 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">«</span> </a>
<a href="#" class="buttonCollapse-open" id="btn-open"> <span class="arrow">»</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;
}最后是从 app.js 加载的 getCookie() setCookie() 和 deleteCookie() 函数供您引用
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');
});最佳答案
I load this in a script tag immidately after the body tag
此时，浏览器可能已经开始创建 DOM/CSSOM，并呈现内容。
尝试将脚本放入 HEAD，并在 HTML 元素 (document.documentElement) 而不是 BODY 上设置类。
关于javascript - 记住切换状态并避免在没有服务器端代码的情况下重新加载页面时出现闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42438955/