Javascript 仅第一次执行函数onload

我在标题中有一个具有以下结构的菜单

$（文档）.ready（函数（）{
$（'.dropdown'）.on（'show.bs.dropdown'，函数（e）{
$（this）.find（'.dropdown menu'）.first（）.stop（true，true.slideDown（）；
});
$（'.dropdown'）.on（'hide.bs.dropdown'，函数（e）{
$（this）.find（'.dropdown menu'）.first（）.stop（true，true.slideUp（）；
});
$（'#entrar'）。单击（函数（e）{
$（'#head'）。滑动切换（）；
$（“.boton”）.css（“显示”、“无”）；
$（“#secciones”）.slideToggle（）；
$（“#英尺”）.slideToggle（）；
});
$（'#entrar'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“.principal”）.offset（）.top+70
}, 700);
});
});
$（文件）.ready（初始化）；
函数init（）{
var sec=document.getElementById（“secciones”）；
var he=document.getElementById（“head”）；
var fo=document.getElementById（“foot”）；
he.style.display=“无”；
sec.style.display=“无”；
fo.style.display=“无”；
}

部分章节

您可以使用HTML5网络存储

    if (typeof(Storage) !== "undefined")
    {
        console.log("Your browser doesn't support webstorage");
    } 
    else if (sessionStorage.getItem("ui_flag") === null) // Check if the key is set. It's a self defined key.
    {
        sessionStorage.setItem("ui_flag", 1); // If not set, set it
        $(document).ready(init); // Now call your init function here. This code will execute only once for a window.
    }
    else
    {
        //No Action. It's not the first time.
    }

---

如果希望localStorage变量在浏览器关闭后保持不变，则可以设置该变量：

$(function() {
    var visited = localStorage['visited'];
    if (!visited) {
       init();
       localStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});

或会话存储（如果希望在浏览器关闭后进行）：

$(function() {
    var visited = sessionStorage['visited'];
    if (!visited) {
       init();
       sessionStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});

---

我会用一个cookie，它是用来存储一个小值的，你只需检查它是否存在

结合CSS，您可以得到一个小型高效的解决方案

使用下面的CSS/JS，当页面第一次创建cookie时加载，第二次将

loadedonce

添加到

html

元素中，然后CSS启动，显示隐藏的元素

通过简单地将cookie的创建移动到按钮单击，它将仅在该按钮被单击后显示cookie

由于cookie在堆栈片段中不起作用，我对您的代码进行了修改

CSS

---

加载时的JS（在头部或JS文件的开头）

---

我想你想要的是一个登录功能。为什么你要用javascript来做CSS可以帮你做的事情？当然，它需要有服务器端的东西来检查是否显示菜单，但是是的。。。使用javascript来显示/隐藏菜单项是一种糟糕的设计，应该避免。如果我只使用css，那么每次加载页面时，css都会应用，如果使用javascript来控制何时执行，这是不正确的。

#secciones, #head, #foot, .loadedonce .boton {
  display: none;
}
.loadedonce #secciones, .loadedonce #head, .loadedonce #foot {
  display: block;
}

(function(d) {
  if (document.cookie.indexOf("loadedonce=yes") < 0) {
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";      
  } else {
    d.classList.add('loadedonce');    
  }
})(document.documentElement);

(function(d) {
  if (document.cookie.indexOf("loadedonce=yes") >= 0) {
    d.classList.add('loadedonce');    
  }
})(document.documentElement);


$('#entrar').click(function() {
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";      
});