js手风琴效果

实现手风琴效果可以借助于CSS3的transition和transform属性，以及JavaScript的事件绑定和DOM操作。

HTML结构可以按照以下方式来组织：

<div class="accordion">
  <div class="item">
    <h2>标题1</h2>
    <div class="content">
      <p>内容1</p>
    </div>
  </div>
  <div class="item">
    <h2>标题2</h2>
    <div class="content">
      <p>内容2</p>
    </div>
  </div>
  <div class="item">
    <h2>标题3</h2>
    <div class="content">
      <p>内容3</p>
    </div>
  </div>
</div>

CSS样式可以按照以下方式来设定：

.accordion {
  display: flex;
  flex-direction: column;
}
.item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}
.item.active {
  height: auto;
}
.item h2 {
  margin: 0;
  padding: 10px;
  cursor: pointer;
}
.item .content {
  padding: 10px;
}

JavaScript代码可以按照以下方式来实现：

var accordion = document.querySelector('.accordion');
var items = accordion.querySelectorAll('.item');

for (var i = 0; i < items.length; i++) {
  var item = items[i];
  var heading = item.querySelector('h2');

  heading.addEventListener('click', function() {
    if (item.classList.contains('active')) {
      item.classList.remove('active');
    } else {
      for (var j = 0; j < items.length; j++) {
        items[j].classList.remove('active');
      }
      item.classList.add('active');
    }
  });
}

这段JavaScript代码首先获取到手风琴容器和所有手风琴项，然后遍历每个手风琴项，为每个标题元素绑定点击事件。点击标题时，如果当前手风琴项已经处于展开状态，则关闭它；否则，关闭其他所有手风琴项并展开当前手风琴项。展开和关闭的效果通过CSS样式中的`.item.active`类来控制。