Как установить первый тумблер всегда открывать, а затем закрывать при нажатии на второй - PullRequest
Новая
       14

Как установить первый тумблер всегда открывать, а затем закрывать при нажатии на второй

1 голос
/ 10 октября 2019

Я реализовал переключение аккордеонного меню с помощью jquery, но у меня возникли проблемы с установкой первого всегда открытым.

Сейчас все переключатели закрыты и хорошо работают при нажатии, но нужна помощь, чтобы показать, что первый всегда открыт.

Вот jquery 

var togg = document.getElementsByClassName("mobile-toggle-menu-panel");
var i;

for (i = 0; i < togg.length; i++) {
 togg[i].onclick = function() {
  var active = document.querySelector(".mobile-toggle-menu-panel.active");
  if (active && active != this) {
   active.classList.remove("active");
}
  $(this).siblings(':not(.active)').removeClass('show');

  this.classList.toggle("active");
  this.classList.toggle("show");
  }
}

Спасибо.

1 Ответ

0 голосов
/ 13 октября 2019

Я реализовал меню переключения аккордеона с помощью jquery, но у меня возникли проблемы с установкой первого всегда открытым.

Долгое время было принято использовать класс для указанияоткрытое или закрытое состояние:

  • class="open"
  • class="closed"

Но в 2019 году, возможно, лучше использовать пользовательский HTML5 data-*атрибуты для обозначения состояния:

  • data-state="open"
  • data-state="closed"

Для достижения эффекта, который вы ищете, начните с первого аккордеонасекция a data-state="open" и каждая последующая аккордеонная секция a data-state="closed".

Рабочий пример: 

const list = document.getElementsByClassName('list')[0];
const listItems = [... list.getElementsByClassName('list-item')];

const openListItem = (e) => {

  listItems.forEach((listItem) => listItem.dataset.state = 'closed');
  e.target.dataset.state = 'open';
}

list.addEventListener('click', openListItem, false);
.list {
padding: 0;
margin: 0;
list-style-type: none;
}

.list-item {
  padding: 12px 0 0 12px;
  color: rgb(255, 255, 255);
  background-color: rgb(191, 0, 0);
  border-top: 1px solid rgb(223, 0, 0);
  border-bottom: 1px solid rgb(127, 0, 0);
  text-transform: uppercase;
  overflow-y: hidden;
  cursor: pointer;
  transition: background-color 0.2s linear, height 0.3s linear;
}

li:first-of-type {
  border-top: none;
}

li:last-of-type {
  border-bottom: none;
}

.list-item:hover,
.list-item[data-state="open"] {
  font-weight: bold;
  background-color: rgb(207, 0, 0);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
}

.list-item p {
  position: relative;
  height: 36px;
  line-height: 36px;
  margin: 12px 0 0 -12px;
  padding: 0 0 0 12px;
  background-color: rgb(255, 191, 191);
  text-transform: initial;
}

.list-item:hover p {
  font-weight: normal;
  text-shadow: none;
}

.list-item[data-state="open"]{
  height: 66px;
}

.list-item[data-state="closed"]{
  height: 30px;
}
<ul class="list">

<li class="list-item" data-state="open">
Item One
<p>Item One Paragraph</p>
</li>

<li class="list-item" data-state="closed">
Item Two
<p>Item Two Paragraph</p>
</li>

<li class="list-item" data-state="closed">
Item Three
<p>Item Three Paragraph</p>
</li>

<li class="list-item" data-state="closed">
Item Four
<p>Item Four Paragraph</p>
</li>

<li class="list-item" data-state="closed">
Item Five
<p>Item Five Paragraph</p>
</li>
</ul>
...