Как я могу держать свои аккордеонные панели открытыми, когда страница загружается, но впоследствии сохранять ее сворачиваемость? - PullRequest
Новая
       9

Как я могу держать свои аккордеонные панели открытыми, когда страница загружается, но впоследствии сохранять ее сворачиваемость?

0 голосов
/ 21 января 2020

Для моего аккордеонного меню мне трудно понять, как держать панели аккордеона открытыми, когда загружается браузер. Я попытался удалить переполнение: скрытый; для панелей, но я сталкиваюсь с ошибками. Я хочу, чтобы мои панели были открыты при загрузке браузера, но после этого пользователь может открывать / закрывать ссылки.

HTML

<div class="sideMenu">
 <div class="logo">TS<div>
 <div class="smallSpacer"></div>

  <div class="accordion">code</div>
   <div class="panel">
    <p>uhn redesign </p>
    <p>180 websites </p>
 </div>

 <div class="bigSpacer"></div>

 <div class="accordion">design</div>
   <div class="panel">
    <p>gigloo </p>
    <p>space is the place</p>
    <p>tyler the creator </p>
    <p>nike concepts</p>
    <p>portraits/fashion</p>
 </div>

 <div class="bigSpacer"></div>

<div class="accordion">personal</div>
   <div class="panel">
    <p>product</p>
    <p>animations</p>
    <p>comics</p>

  </div>
</div>

CSS

body{
font-family: 'Roboto Mono', monospace;
}
.sideMenu{
 background-color:black;
width:250px;
height:100%;
position:fixed;
margin:20px;
text-align:center;
 }
.logo{
 color:white;
}

.smallSpacer{
 margin-bottom:15px;
}

.bigSpacer{
margin-bottom:20px;
}
.accordion {
color: white;
 cursor: pointer;
transition: 0.4s;
font-weight:500;
}

.active, .accordion:hover {

}

.panel {
font-weight:300;
 max-height: 0;
overflow: hidden;
transition: max-height 0.1s ease-out;
}

JAVASCRIPT

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
 acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = panel.scrollHeight + "px";
 }
 });
}

Вот мой Codepen. https://codepen.io/taniasharma98/pen/KKwQXBK

1 Ответ

0 голосов
/ 21 января 2020

Вот мое решение: 

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
//this is where magic happens
  if(i==0){
    acc[0].classList.toggle("active");
    var panel = acc[0].nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }  

  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

Как видите, все, что я сделал, это расширил аккордеон для первого элемента. Я скопировал и вставил тот же код, который выполнял слушатель событий, и вместо этого прикрепил его к первому элементу непосредственно при запуске. Это также помогает сохранить возможность свертывания, поскольку слушатели событий были добавлены независимо от другого кода.

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

...