jquery - 单击第二个时如何设置第一个切换始终打开然后关闭

Question

我已经用 jquery 实现了一个切换 Accordion 菜单，但是在设置第一个总是打开时遇到了一些问题。

现在所有的开关都已关闭，并且在点击时运行良好，但需要一些帮助才能显示第一个开关始终打开。

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

谢谢。

Answer 1

I have implemented a toggle accordion menu with jquery but having some issue to setting first one always open.

很长一段时间以来，使用类来指示打开或关闭状态一直是惯例:

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

但在 2019 年，使用 HTML5 自定义 data-* 属性来指示状态可以说是更好的做法:

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

为了达到您正在寻找的效果，首先给第一个 Accordion 部分 data-state="open" 和每个后续的 Accordion 部分 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>