Shopify页脚菜单如何实现同一时间仅展开一个dropdown

这个交互不需要安装付费APP，直接修改主题代码即可实现，核心逻辑是点击新下拉时先重置所有已展开项的状态，再展开当前项，具体操作步骤如下：

操作步骤 #

• 进入Shopify后台，依次打开「在线商店」>「主题」，找到当前使用的主题，点击「操作」>「编辑代码」
• 在代码编辑器的Sections目录下找到footer.liquid文件，部分老主题的页脚菜单逻辑会拆分到Snippets目录下的footer-menu.liquid类文件中，找到渲染页脚导航的代码块即可。

1. 规范菜单结构 #

如果你的主题目前已经有点击展开页脚菜单的基础逻辑，不需要调整原有HTML结构，只要记住触发器（点击的菜单标题）、下拉内容面板对应的类名即可。如果还没有基础下拉结构，可以参考下面的基础结构调整：

<div class="footer-menu-group">
  <button class="footer-dropdown-trigger" aria-expanded="false">
    服务支持
    <span class="arrow-icon">+</span>
  </button>
  <div class="footer-dropdown-panel" hidden>
    <ul>
      <li><a href="/shipping">配送政策</a></li>
      <li><a href="/return">退换规则</a></li>
      <li><a href="/contact">联系我们</a></li>
    </ul>
  </div>
</div>

*所有页脚菜单组都要套用统一的触发器、面板类名，保证JS能批量绑定事件。

2. 添加交互逻辑 #

将下面的JS代码添加到footer.liquid文件末尾，或者主题全局脚本文件（通常是Assets目录下的theme.js/global.js）中：

document.addEventListener('DOMContentLoaded', () => {
  // 替换成你主题实际的触发器类名
  const allTriggers = document.querySelectorAll('.footer-dropdown-trigger');
  if (!allTriggers.length) return;

  allTriggers.forEach(trigger => {
    trigger.addEventListener('click', (e) => {
      const currentPanel = trigger.nextElementSibling; // 若结构不是触发器紧邻面板，替换为对应面板选择器
      const isOpen = trigger.getAttribute('aria-expanded') === 'true';

      // 先关闭所有已展开的下拉
      allTriggers.forEach(item => {
        if (item === trigger) return;
        item.setAttribute('aria-expanded', 'false');
        const panel = item.nextElementSibling;
        if (panel) {
          panel.hidden = true;
          // 若你的主题用类名控制展开样式，替换为对应类名操作
          // item.classList.remove('active');
          // panel.classList.remove('show');
        }
      });

      // 切换当前点击项的状态
      trigger.setAttribute('aria-expanded', !isOpen);
      currentPanel.hidden = isOpen;
      // 对应上面的类名逻辑
      // trigger.classList.toggle('active', !isOpen);
      // currentPanel.classList.toggle('show', !isOpen);
    })
  })
})

如果你的主题原有展开逻辑是通过添加/移除CSS类实现的，把代码里注释的类名操作部分打开，替换成你主题实际使用的类名即可，不需要强制用hidden属性控制显隐。

3. 补充样式（按需） #

如果需要调整展开动画、触发器样式，可以把下面的CSS加到主题的样式文件（通常是Assets目录下的base.css/theme.css）中：

.footer-dropdown-trigger {
  width: 100%;
  padding: 1rem 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 600;
}
.footer-dropdown-panel {
  padding-bottom: 1rem;
}
.arrow-icon {
  transition: transform .2s ease;
}
.footer-dropdown-trigger[aria-expanded="true"] .arrow-icon {
  transform: rotate(45deg);
}

注意事项 #

• 不同主题的类名、结构差异较大，不要硬套示例类名，先在浏览器预览页脚，通过开发者工具确认实际的触发器、面板类名后再替换JS里的选择器
• 代码修改完成后先在主题预览模式下测试移动端、桌面端的点击效果，确认跳转、展开逻辑正常后再发布主题
• 如果主题自带页脚下拉的JS逻辑，先把原有逻辑注释掉再添加新代码，避免事件冲突导致交互异常

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