html手风琴下拉菜单

HTML手风琴下拉菜单是一种常见的网页设计元素，它可以在有限的空间内展示多个内容块，并通过点击或悬停来展开或折叠这些内容块。下面是一个简单的HTML手风琴下拉菜单的实现方式：

1. 使用HTML结构创建手风琴容器：

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">标题1</h3>
    <div class="accordion-content">
      <p>内容1</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">标题2</h3>
    <div class="accordion-content">
      <p>内容2</p>
    </div>
  </div>
  <!-- 添加更多的accordion-item -->
</div>

2. 使用CSS样式设置手风琴的外观和交互效果：

.accordion {
  width: 100%;
}

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #f5f5f5;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-item.active .accordion-content {
  display: block;
}

3. 使用JavaScript或jQuery添加交互功能：

// 使用原生JavaScript实现
var accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(function(item) {
  var header = item.querySelector('.accordion-header');
  header.addEventListener('click', function() {
    item.classList.toggle('active');
  });
});

// 使用jQuery实现
$('.accordion-header').click(function() {
  $(this).parent('.accordion-item').toggleClass('active');
});

这样，当用户点击手风琴的标题时，对应的内容块会展开或折叠显示。