Блог

Главная - Вопросы по программированию - Первый элемент уже нажат

Первый элемент уже нажат

#html #menu #click #accordion

#HTML #меню #нажмите #аккордеон

Вопрос:

На основе этого https://www.w3schools.com/howto/howto_js_accordion.asp

Мне нужно, чтобы первый «раздел 1» был уже нажат по умолчанию

Спасибо

Ответ №1:

tl: dr: удалите стиль display: none .

Вы можете создать другой класс в CSS с помощью:

 .panelshow {
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
}

А затем установите класс для panel1 следующим образом:

 <button class="accordion">Section 1</button>
<div class="panelshow">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Результат:

 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.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}  
 .accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.panelshow{
  padding: 0 18px;
  background-color: white;
  overflow: hidden;
}  
 <button class="accordion">Section 1</button>
<div class="panelshow">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Комментарии:

1. @MariusTrandafir теперь работает.

2. @MariusTrandafir Если это поможет, было бы полезно, если бы вы приняли мой ответ.

Ответ №2:

вы можете добавить класс с именем open следующим образом:

 .open {
 display: block;
}

затем откройте панель, которую вы хотите открыть, с таким классом, как: <div class="panel open"></>

также дайте первому классу accordion активный класс, например : <button class="accordion active">Section 1</button>

и просто переключайтесь между ними каждый раз.