使用document.onclick关闭下拉菜单时首次点击失效问题求助

咱们一步步拆解首次点击失效的逻辑，你就明白问题出在哪了：

当你第一次点击toggle按钮时，事件执行顺序是这样的：

1. 先触发toggle上的原生onclick（也就是你的toggle_display函数），菜单被切换为显示状态；
2. 事件顺着DOM树冒泡到document，执行你给document.onclick绑定的回调；
3. 在这个回调里，你才给.options_toggle绑定了e.stopPropagation()的事件——注意，这个绑定要到下一次点击才会生效；
4. 回调接着执行$(".options_content").removeClass("show").addClass("hide")，刚显示的菜单立刻被隐藏了。

所以第一次点击的展开效果直接被抵消，看起来像是无效操作。而第二次点击toggle时：

1. 先触发你上一次点击document时绑定的e.stopPropagation()，直接阻止了事件冒泡到document；
2. 再触发原生的toggle_display，菜单正常切换；
3. 因为冒泡被阻止，document的click回调不会执行，菜单就能保持显示状态。

另外还有个小问题：每次点击document都会重复给toggle绑定一次click事件，虽然不会报错，但会导致后续点击toggle时，stopPropagation()被执行多次，属于没必要的冗余。

我们需要调整事件绑定的时机，同时优化document点击时的判断逻辑（避免误关闭菜单）：

1. 把阻止冒泡的事件提前绑定，页面加载完成就生效；
2. 在document的点击事件中，判断点击的目标是否属于下拉菜单或toggle按钮本身，如果不是再执行隐藏操作。

修正后的jQuery代码如下：

$(document).ready(function () {
    // 页面加载完成就绑定toggle的阻止冒泡事件，只绑定一次
    $(".options_toggle").click(function (e) {
        e.stopPropagation();
    });

    // 监听document的点击事件
    $(document).click(function(e) {
        // 判断点击的目标是否不是菜单和toggle元素（包括它们的后代），且菜单是显示状态
        if (!$(e.target).closest(".options_content, .options_toggle").length) {
            $(".options_content").removeClass("show").addClass("hide");
        }
    });
});

你也可以优化一下toggle_display函数，让状态切换更严谨：

function toggle_display(id) {
    const elem = document.getElementById(id);
    if (elem.classList.contains("hide")) {
        elem.classList.remove("hide");
        elem.classList.add("show");
    } else {
        elem.classList.remove("show");
        elem.classList.add("hide");
    }
}

• closest()方法会从当前点击的元素向上查找DOM树，判断目标是否是.options_content或.options_toggle的后代元素，这样点击菜单内部的时候也不会关闭菜单，更符合用户预期；
• 把事件绑定移到document.ready的顶层，确保页面加载完成就绑定好，彻底解决首次点击失效的问题；
• 移除了重复绑定的逻辑，让代码更高效简洁。

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