如何在GrapesJS中实现可折叠手风琴区块的交互功能？

核心方案 #

要实现手风琴的展开/收起交互，需给标题栏绑定点击事件切换内容区显示状态，同时配置内容区域支持拖拽添加各类媒体元素，以下是具体实现步骤：

1. 注册手风琴基础区块 #

先添加单个手风琴项的区块，结构包含可点击的标题栏和默认隐藏的内容区：

editor.BlockManager.add('accordion-item', {
  label: '手风琴项',
  category: '布局组件',
  content: `
    <div class="accordion-item">
      <div class="accordion-header">点击展开/收起</div>
      <div class="accordion-content" style="display: none;">
        <div class="content-wrapper" data-gjs-droppable="true" data-gjs-editable="true">添加文本、图片等内容</div>
      </div>
    </div>
  `,
  attributes: { class: 'gjs-block-accordion' }
});

2. 绑定折叠交互逻辑（关键） #

在GrapesJS初始化后，给所有手风琴标题栏绑定点击事件，同时监听新添加的组件，实时绑定事件避免遗漏：

editor.on('load', () => {
  bindAccordionEvents();
  
  // 监听新添加的手风琴项，延迟绑定确保DOM渲染完成
  editor.on('component:add', (model) => {
    if (model.get('type') === 'default' && model.get('classes').includes('accordion-item')) {
      setTimeout(bindAccordionEvents, 100);
    }
  });
});

function bindAccordionEvents() {
  const headers = document.querySelectorAll('.accordion-header');
  headers.forEach(header => {
    header.removeEventListener('click', toggleAccordion); // 避免重复绑定
    header.addEventListener('click', toggleAccordion);
  });
}

function toggleAccordion(e) {
  const content = e.target.nextElementSibling;
  content.style.display = content.style.display === 'none' ? 'block' : 'none';
  
  // 可选：成组折叠逻辑（同一组仅展开一个）
  // const group = e.target.closest('.accordion-group');
  // if (group) {
  //   group.querySelectorAll('.accordion-content').forEach(item => {
  //     if (item !== content) item.style.display = 'none';
  //   });
  // }
}

3. 配置内容区域可编辑性 #

通过data-gjs-droppable="true"和data-gjs-editable="true"属性，让内容区域支持拖拽添加图片、文本等任意媒体元素，无需额外复杂配置。

4. 实现成组手风琴（可选） #

如果需要同一组内仅展开一个手风琴项，先注册手风琴组区块：

editor.BlockManager.add('accordion-group', {
  label: '手风琴组',
  category: '布局组件',
  content: `
    <div class="accordion-group">
      <div class="accordion-item">
        <div class="accordion-header">标题1</div>
        <div class="accordion-content" style="display: none;">
          <div class="content-wrapper" data-gjs-droppable="true">内容1</div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-header">标题2</div>
        <div class="accordion-content" style="display: none;">
          <div class="content-wrapper" data-gjs-droppable="true">内容2</div>
        </div>
      </div>
    </div>
  `
});

然后取消toggleAccordion函数里的成组逻辑注释即可。

5. 添加基础样式优化显示 #

给手风琴添加基础样式提升视觉效果：

.accordion-item {
  border: 1px solid #eee;
  margin-bottom: 8px;
}
.accordion-header {
  padding: 12px;
  background: #f5f5f5;
  cursor: pointer;
  user-select: none;
}
.accordion-content {
  padding: 12px;
}
.content-wrapper {
  min-height: 50px;
}

注意事项 #

• 事件绑定需等待组件加载完成，避免DOM元素未找到的问题
• 若使用预览模式，需确保交互逻辑在预览iframe中生效（可通过GrapesJS的Preview API注入脚本）
• 每次绑定事件前先移除旧事件，防止重复触发

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