Question

我已经使用Vanilla JS制作了一个可折叠的菜单，该菜单可以正常工作，但是我希望在您单击菜单时将其折叠。我以为将事件侦听器添加到窗口会起作用，但是我一定做错了。

const pageTitleDrop = document.getElementById('page-title');
const dropMenu = document.getElementById('dropdown');

pageTitleDrop.addEventListener('click', () => {
    dropMenu.classList.toggle('collapsed');
})

window.addEventListener('click', (e) => {
    if (e.target !== dropMenu) {
        if (dropMenu.classList.contains('collapsed')) {
            return;
        } else {
            dropMenu.classList.toggle('collapsed');
        }
    }
})

Answer 1

e.target可以是dropMenu，但也可以是该容器的任何子元素。您需要检查e.target的祖先下拉列表。幸运的是，这很容易：

if( !e.target.closest("#dropdown")) {
    dropMenu.classList.add("collapsed");
}

请注意，我还简化了您的代码。而不是“如果已设置班级，什么也不做，否则切换班级”，它现在只是“添加班级”-如果已经存在，则什么也不会发生。

单击元素时折叠div

1 个答案: