使用Shopify Liquid实现打开下拉菜单时自动关闭其他已展开下拉菜单

关于link.active为true的触发原因 #

Liquid是Shopify内置的服务端模板语言，link.active是Shopify给link对象提供的原生全局属性，不需要开发者手动赋值：当用户当前访问的页面URL和link.url完全匹配时，服务端渲染页面的过程中Shopify会自动将该属性设置为true，页面渲染完成发送到前端后，这个属性的值就固定在生成的HTML里了，不能通过前端交互动态修改。

选中所有下拉菜单元素的方法 #

你要实现的点击切换展开状态属于前端交互逻辑，本身就不适合用Liquid实现（Liquid在服务端执行，页面加载完成后就不会再运行），直接用JS操作即可：

• 你现有代码里所有下拉触发按钮都统一使用了collapsible-trigger类，直接用document.querySelectorAll('.collapsible-trigger')就能选中全部下拉触发元素
• 后续的切换逻辑不需要修改link.active，直接操作DOM属性即可：遍历选中的所有元素，移除is-open类、将aria-open属性设为false，再给当前点击的元素添加is-open类、将aria-open属性设为true即可

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