javascript - 单击元素时折叠 div

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");
}

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