移动端图片式Accordion菜单单开功能实现技术问询

看起来你已经搭好了基础的Accordion结构，现在要优化成同一时间仅展开一个面板，同时支持点击当前展开的标题来关闭它对吧？我给你整理了两种常用的实现方案，原生JavaScript和jQuery的，你可以根据项目情况选：

先确认你的HTML结构（参考示例） #

先假设你的HTML结构大概是这样的（如果结构不同，只需要调整选择器就行）：

<div class="accordion">
  <!-- 第一个分类 -->
  <div class="accordion-item">
    <img src="your-img-1.jpg" class="accordion-header" alt="分类1">
    <div class="accordion-content">这里是分类1的内容...</div>
  </div>
  <!-- 第二个分类 -->
  <div class="accordion-item">
    <img src="your-img-2.jpg" class="accordion-header" alt="分类2">
    <div class="accordion-content">这里是分类2的内容...</div>
  </div>
  <!-- 更多分类... -->
</div>

基础CSS样式（控制展开/收起过渡） #

给内容面板加上过渡动画，让展开收起更自然：

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  /* 可以添加padding、背景色等自定义样式 */
}

.accordion-content.active {
  max-height: 600px; /* 根据你的内容高度调整，设一个足够大的值即可 */
}

方案1：原生JavaScript实现（无依赖） #

纯原生JS就能搞定，不需要额外库：

// 等DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有标题图片
  const accordionHeaders = document.querySelectorAll('.accordion-header');

  // 给每个标题绑定点击事件
  accordionHeaders.forEach(header => {
    header.addEventListener('click', function() {
      // 获取当前标题对应的内容面板
      const currentContent = this.nextElementSibling;
      // 判断当前面板是否处于展开状态
      const isCurrentlyActive = currentContent.classList.contains('active');

      // 第一步：关闭所有其他已展开的面板
      document.querySelectorAll('.accordion-content').forEach(content => {
        if (content !== currentContent) {
          content.classList.remove('active');
        }
      });

      // 第二步：切换当前面板的状态
      if (isCurrentlyActive) {
        // 若当前已展开，就关闭它
        currentContent.classList.remove('active');
      } else {
        // 若当前是收起的，就展开它
        currentContent.classList.add('active');
      }
    });
  });
});

方案2：jQuery实现（项目已引入jQuery时用） #

代码会更简洁：

$(document).ready(function() {
  $('.accordion-header').on('click', function() {
    const $currentContent = $(this).next('.accordion-content');
    const isActive = $currentContent.hasClass('active');

    // 关闭所有非当前的面板
    $('.accordion-content').not($currentContent).removeClass('active');

    // 切换当前面板状态：已展开则关闭，未展开则打开
    $currentContent.toggleClass('active', !isActive);
  });
});

逻辑说明 #

• 点击任意标题时，首先会关闭所有其他已展开的面板，确保同一时间只有一个面板处于展开状态
• 接着判断当前面板的状态：如果已经展开，就关闭它；如果是收起的，就展开它
• 用CSS的max-height和transition实现过渡动画，比直接用display: none的切换效果更流畅

内容的提问来源于stack exchange，提问作者user8139445