如何在JS中监听Foundation Toggler关闭按钮点击事件并操作DOM

问题原因 #

你原来的写法存在两个错误：

1. 事件名格式错误：Foundation的Toggler自定义事件不需要加on.前缀，addEventListener绑定自定义事件时无需额外加on前缀，只有内联事件、DOM.onxxx形式的绑定才需要加on前缀
2. 绑定对象错误：Toggler的相关事件是触发在你绑定了Toggler功能的目标DOM元素上，而非全局window对象

正确实现示例 #

假设你绑定Toggler功能的面板id为togglePanel，可按如下方式绑定事件：

// 获取Toggler绑定的目标元素
const togglePanel = document.querySelector('#togglePanel')

// 监听面板关闭完成事件，回调内执行你需要的DOM操作
togglePanel.addEventListener('closed.zf.toggler', () => {
  console.log('closing the panel')
  // 此处填写你的DOM操作逻辑
})

如果你需要在切换动作触发的瞬间执行逻辑（不需要等Toggler动画完成），可以监听toggle.zf.toggler事件；如果需要监听面板打开完成的时机，可以监听opened.zf.toggler事件。

如果你是通过jQuery初始化的Foundation组件，也可以用如下写法：

$('#togglePanel').on('closed.zf.toggler', function () {
  // 自定义逻辑
})

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