js的手风亲

手风琴效果是网页中常见的一种动态效果，它可以让网页更加生动有趣。下面我们来介绍如何使用JS实现一个800字的手风琴效果。

首先，我们需要在HTML中创建一个手风琴的框架。这个框架由多个div组成，每个div代表一个手风琴的标题和内容。每个div的标题部分也是一个div，用于显示标题文字。内容部分也是一个div，用于显示内容。我们将每个div都用一个类名accordion-item来进行标记。

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-header">第一组标题</div>
    <div class="accordion-content">第一组内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">第二组标题</div>
    <div class="accordion-content">第二组内容</div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header">第三组标题</div>
    <div class="accordion-content">第三组内容</div>
  </div>
  ...
</div>

接下来，我们使用CSS为手风琴框架设置样式。手风琴框架应该具有一定的宽度和高度，并且设置position属性为relative，以便进行绝对定位的子元素。标题部分应该具有一定的高度，并且设置background-color属性为灰色以区别于内容部分。内容部分应该具有display:none属性，以便实现手风琴效果。

.accordion {
  width: 800px;
  height: 400px;
  position: relative;
}

.accordion-item {
  width: 100%;
  height: 100%;
  position: absolute;
}

.accordion-header {
  height: 50px;
  background-color: #ccc;
}

.accordion-content {
  display: none;
}

接下来，我们使用JS为手风琴框架添加事件。当点击标题部分时，我们需要让该标题所在的div的内容部分显示出来，并将其他的内容部分隐藏。我们可以通过遍历所有的div来实现这个效果。我们首先获取所有的标题部分和内容部分，并为每个标题部分添加点击事件。当点击标题部分时，我们遍历所有的div，如果当前div是被点击的标题所在的div，则显示其内容部分，否则隐藏其内容部分。

// 获取所有的标题和内容
var headers = document.querySelectorAll(".accordion-header");
var contents = document.querySelectorAll(".accordion-content");

// 遍历所有的标题，并为每个标题添加点击事件
for (var i = 0; i < headers.length; i++) {
  headers[i].addEventListener("click", function() {
    
    // 遍历所有的div，如果当前div是被点击的标题所在的div，则显示其内容部分，否则隐藏其内容部分
    for (var j = 0; j < contents.length; j++) {
      if (contents[j].parentNode === this.parentNode && contents[j].style.display === "none") {
        contents[j].style.display = "block";
      } else {
        contents[j].style.display = "none";
      }
    }
  });
}

最终，我们实现了一个手风琴效果。当点击一个标题时，该标题所在的内容部分会显示出来，并将其他的内容部分隐藏。整个手风琴框架具有一定的宽度和高度，并且可以在CSS中进行自定义。