HTML / Javascript / CSS Разборное меню не закрывается при обновлении

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. Это сделало бы меню скрытым при обновлении страницы, но проблема не исчезла бы, если бы вам также требовалось оставаться видимым между обновлениями, если пользователи открыли его.

В этом случае вы можете установить cookie с javascript во время переключения стилей:

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/

Приведенный выше код проверит, есть ли cookie с именем и значением "menu-state = hide". Если есть, меню будет изначально скрыто. Этот файл cookie устанавливается и изменяется при нажатии на переключатель.

О файлах cookie в javascript: https://www.w3schools.com/js/js_cookies.asp

Надеюсь, это поможет!