刷新时HTML/Javascript/CSS可折叠菜单未保持关闭状态

正如标题中所述，刷新页面时，我的可折叠菜单不会保持关闭状态。每次加载页面时，可折叠菜单将完全展开，即使在刷新之前它已完全关闭。这是一个小问题，因为在这个可折叠模型中有很多东西

下面是它的基本代码：

CSS:

HTML:

教程

JavaScript:

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for(i = 0; i< coll.length; i++) {
    coll[i].addEventListener("click", function() {
         this.classList.toggle("active");
         var content = this.nextElementSibling;
         if(content.style.display === "block") {
               content.style.display = "none";
         }
         else {
               content.style.display = "block";
         }
     });
}
</script>

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

---

对于JavaScript，我是一个初学者，所以我很确定这就是错误所在，但如果有任何帮助，我将不胜感激。非常感谢你

在您提供的代码中，菜单的状态从未保存过-因此当页面刷新时，所有内容都只是“重置”为默认值

一种解决方案当然是使用“display:none；”作为css中的默认值。这将使菜单在页面刷新时隐藏，但如果用户需要在刷新之间保持可见（如果用户已打开），则问题将持续存在

在这种情况下，您可以在切换样式时使用javascript设置cookie：

HTML

<button class="collapsible">Collapsible 1</button>
<div>
    <div class="menu-item">
    <p>Content 1</p>
    </div>

    <div class="menu-item">
    <p>Content 2</p>
    </div>
</div>

可折叠1
内容1

内容2

JAVASCRIPT

var coll = document.getElementsByClassName("collapsible");

for(i = 0; i< coll.length; i++) {
    var cookies = decodeURIComponent(document.cookie).split(";");
    for(i=0;i<cookies.length;i++) {
      if(cookies[i] == "menu-state=hide") {
                var content = coll[i].nextElementSibling;
        content.style.display = "none";
      }
    }
    coll[i].addEventListener("click", function() {
         var content = this.nextElementSibling;
         if(content.style.display === "block") {
               content.style.display = "none";
               document.cookie = "menu-state=hide";
         }
         else {
               content.style.display = "block";
               document.cookie = "menu-state=display";
         }
     });
} 

var coll=document.getElementsByClassName（“可折叠”）；
对于（i=0；i对于（i=0；i@Colleen-太棒了！祝你所有的项目都好运！：-D
<button class="collapsible">Collapsible 1</button>
<div>
    <div class="menu-item">
    <p>Content 1</p>
    </div>

    <div class="menu-item">
    <p>Content 2</p>
    </div>
</div>

var coll = document.getElementsByClassName("collapsible");

for(i = 0; i< coll.length; i++) {
    var cookies = decodeURIComponent(document.cookie).split(";");
    for(i=0;i<cookies.length;i++) {
      if(cookies[i] == "menu-state=hide") {
                var content = coll[i].nextElementSibling;
        content.style.display = "none";
      }
    }
    coll[i].addEventListener("click", function() {
         var content = this.nextElementSibling;
         if(content.style.display === "block") {
               content.style.display = "none";
               document.cookie = "menu-state=hide";
         }
         else {
               content.style.display = "block";
               document.cookie = "menu-state=display";
         }
     });
}