手风琴滑块切换效果js

手风琴滑块切换效果，通常是指一种常见的网页交互设计，它利用JavaScript创建了一种类似抽屉式的效果，用户可以点击或者滑动某个元素，使得其他相关的元素逐一展开或折叠。这种效果常用于导航菜单、内容面板或者是信息展示等场景。

在JavaScript中，实现手风琴滑块切换通常会结合HTML结构（比如`.active`类标识当前选中的项）、CSS样式（设置元素的显示隐藏）以及JavaScript事件处理（如`click`或`mouseover`事件）。一个简单的例子可能会包含以下几个步骤：

1. HTML结构：定义多个需要切换的容器，并添加一个初始激活的状态，例如：

<ul class="accordion">
  <li><a href="#panel1">Panel 1</a></li>
  <li><a href="#panel2">Panel 2</a></li>
  <!-- 更多面板 -->
</ul>

<div id="panel1" class="panel">...</div>
<div id="panel2" class="panel hide">...</div>

2. CSS样式：给`.hide`类添加`display: none;`，隐藏非激活的面板：

.panel.hide {
  display: none;
}

3. JavaScript逻辑：通过事件监听器控制切换效果：

var accordion = document.querySelector('.accordion');
var panels = document.querySelectorAll('.panel');

function togglePanel(panelId) {
  var panel = document.getElementById(panelId);
  var currentActive = document.querySelector('.active');

  if (currentActive && currentActive.id === panelId) {
    // 如果当前激活，取消激活
    currentActive.classList.remove('active');
  } else {
    // 否则，激活新面板并取消其他面板的激活
    panel.classList.add('active');
    currentActive && currentActive.classList.remove('active');
  }
}

// 绑定点击事件到链接
[].forEach.call(accordion.querySelectorAll('a'), function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();
    togglePanel(this.getAttribute('href').substring(1)); //去掉'#'
  });
});