如何通过JavaScript从URL获取JSON并填充手风琴组件

嘿，我来帮你搞定用JSON数据填充手风琴组件的事儿！看起来你已经有了基础的手风琴HTML结构，接下来咱们用JavaScript把接口里的动态数据填进去，同时保留手风琴的展开收起功能。

核心逻辑就是用fetch API拉取指定的JSON数据，然后动态生成手风琴的每一项，最后绑定展开收起的交互事件，确保功能完整。

1. 调整HTML结构 #

先把原来的静态手风琴项去掉，只保留容器即可，因为我们要动态生成所有内容：

<div class="accordion js-accordion">
  <!-- 动态生成的手风琴项会插入到这里 -->
</div>

2. 编写JavaScript逻辑 #

这段代码会负责获取数据、渲染手风琴项，以及绑定展开收起的交互：

// 获取手风琴容器元素
const accordionContainer = document.querySelector('.js-accordion');

// 从指定接口拉取JSON数据
fetch('http://design.propcom.co.uk/buildtest/accordion-data.json')
  .then(response => {
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error('请求数据失败啦');
    }
    return response.json();
  })
  .then(accordionData => {
    // 遍历数据，生成每一个手风琴项
    accordionData.forEach((item, index) => {
      // 创建手风琴项的容器
      const accordionItem = document.createElement('div');
      accordionItem.className = 'accordion__item js-accordion-item';
      
      // 第一个项默认展开，添加active类
      if (index === 0) {
        accordionItem.classList.add('active');
      }

      // 填充手风琴项的内容（标题和正文）
      accordionItem.innerHTML = `
        <div class="accordion-header js-accordion-header">${item.title}</div>
        <div class="accordion-body js-accordion-body ${index !== 0 ? 'hidden' : ''}">
          <div class="accordion-body__contents">${item.content}</div>
        </div>
      `;

      // 把生成的项添加到容器里
      accordionContainer.appendChild(accordionItem);
    });

    // 数据渲染完成后，绑定展开收起的点击事件
    setupAccordionToggle();
  })
  .catch(error => {
    console.error('加载数据出错:', error);
    // 出错时显示提示信息
    accordionContainer.innerHTML = '<p>抱歉，手风琴内容加载失败了😥</p>';
  });

// 手风琴展开收起的交互逻辑
function setupAccordionToggle() {
  const allHeaders = document.querySelectorAll('.js-accordion-header');
  
  allHeaders.forEach(header => {
    header.addEventListener('click', () => {
      const parentItem = header.parentElement;
      const bodyContent = parentItem.querySelector('.js-accordion-body');
      
      // 切换项的active状态
      parentItem.classList.toggle('active');
      // 切换内容的显示/隐藏
      bodyContent.classList.toggle('hidden');
    });
  });
}

3. 补充必要的CSS样式 #

确保手风琴的隐藏/显示效果正常，同时添加基础样式提升交互体验：

/* 默认隐藏手风琴内容 */
.accordion-body.hidden {
  display: none;
}

/* 手风琴头部样式，提示可点击 */
.accordion-header {
  cursor: pointer;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.accordion-header:hover {
  background-color: #e9ecef;
}

/* 手风琴内容区域样式 */
.accordion-body__contents {
  padding: 16px;
  border-bottom: 1px solid #e9ecef;
  line-height: 1.5;
}

/* 展开状态的头部样式（可选） */
.accordion__item.active .accordion-header {
  background-color: #e9ecef;
}

• 用fetch处理异步请求时，我们做了错误捕获，避免请求失败时页面出现空白
• 动态生成元素时，给第一个项默认添加active类并展开内容，符合常见的交互习惯
• 交互逻辑单独抽成函数，确保数据渲染完成后再绑定事件，避免出现找不到元素的问题
• 用CSS类控制显示/隐藏，比直接操作style.display更易维护，也方便后续添加过渡动画

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