如何在Squarespace移动端页面实现按钮触发汉堡菜单展开？

实现思路 #

Squarespace的汉堡菜单展开本质是触发其内置的点击事件，我们只需要通过自定义JS模拟这个点击动作，就能让页面内的按钮控制汉堡菜单的展开。

具体步骤 #

1. 给目标按钮添加自定义标识
   在页面编辑时，找到你要设置的“了解更多”按钮，进入按钮的设置面板，找到「高级」选项，在「CSS类」输入框中填入 trigger-hamburger（类名可自定义，只要和后续JS里的一致即可）。

2. 注入自定义JS代码
   进入该私密页面的「设置」→「高级」→「页面页眉代码注入」，粘贴以下代码：

   document.addEventListener('DOMContentLoaded', function() {
     // 获取我们标记的自定义按钮
     const triggerBtn = document.querySelector('.trigger-hamburger');
     // 获取汉堡菜单按钮（根据你的模板调整选择器）
     const hamburgerBtn = document.querySelector('.header-burger');
     // 部分模板的汉堡选择器是 .sqs-mobile-menu-toggle，如果上面的选择器无效，替换成这个试试
   
     if (triggerBtn && hamburgerBtn) {
       triggerBtn.addEventListener('click', function(e) {
         e.preventDefault(); // 阻止按钮默认跳转行为（如果按钮设置了链接）
         hamburgerBtn.click(); // 模拟点击汉堡菜单，触发展开
       });
     }
   });
   

注意事项 #

• 调整汉堡选择器：如果代码无效，右键页面上的汉堡按钮→「检查」，查看它的HTML类名，替换代码中hamburgerBtn的选择器。
• 按钮跳转处理：如果你的按钮原本设置了跳转链接，e.preventDefault()会阻止跳转；如果需要跳转和展开菜单同时生效，可以去掉这行代码。
• 移动端测试：保存设置后，用手机直接访问页面（或用浏览器的移动端预览模式），点击按钮验证效果。

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