Question

如标题中所述，刷新页面时，我的可折叠菜单没有保持关闭状态。每次加载页面时，可折叠菜单都会完全展开，即使刷新之前它已完全关闭。这有点问题，因为这种可折叠物中有很多东西。

这是它的基本代码：

CSS：

//some code here for the design, background color and stuff that shouldn't matter,
// .active is what I think I need

.active, .collapsible:hover{
background-color: #02538D;
}

HTML：

<button class="collapsible">Tutorials</button>
<div>
    <div class="content">
    <p>
      <?php
         //some php here for output of collapsible
      ?>
    </p>
    </div>

    <div class="content">
    <p>
       <?php>
         //some php here for output of collapsible
       ?>
    </p>
    </div>
</div>

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>

我是JavaScript的初学者，所以我很确定这是错误的地方，但是任何帮助都将不胜感激。非常感谢！

Answer 1

在您提供的代码中，菜单状态永远不会保存-因此，刷新页面时，所有内容都会简单地“重置”为默认值。

一个解决方案当然是使用'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>

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";
         }
     });
}

https://jsfiddle.net/hxcy1vLr/41/

上面的代码将检查是否存在名称和值为“ menu-state = hide”的cookie。如果有，菜单最初将被隐藏。当您单击切换开关时，将设置并更改此Cookie。

关于javascript中的cookie： https://www.w3schools.com/js/js_cookies.asp

希望这会有所帮助！

HTML / Javascript / CSS可折叠菜单刷新后不会保持关闭状态

1 个答案: