点击外部关闭guest-section模块时点击内部也触发关闭该如何解决

问题原因 #

你的原有逻辑只判断点击目标是否是#guest-section根节点本身，但点击模块内部的按钮、输入框、文本等子元素时，e.target匹配的是这些子元素，并非根节点，因此触发了隐藏逻辑。

解决方案 #

替换你的原有jQuery代码为以下内容即可：

$(document).click(function(e) {
    // 若你有单独的打开宾客区的触发按钮，添加此行排除（将#guest-toggle-btn替换为你实际的触发按钮选择器）
    if ($(e.target).closest('#guest-toggle-btn').length) return;
    // 仅当点击目标不在宾客选择区内部时，才触发隐藏
    if($(e.target).closest('#guest-section').length === 0) {
        $("#guest-section").hide();
    }
});

逻辑说明 #

• closest()方法会从当前点击元素开始，向上遍历所有父级元素，判断是否存在匹配指定选择器的元素
• 当点击宾客区内部任意元素（包括数量调整按钮、输入框、文本）时，closest('#guest-section')会找到根节点，不会触发隐藏
• 当点击宾客区外部时，找不到匹配节点，触发隐藏逻辑
• 若你的打开触发按钮本身就在#guest-section内部，可以删除排除触发按钮的那行代码。

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