自定义带图片选项的下拉框点击外部无法关闭的问题求助

你当前的代码存在两个问题：一是选择器仅针对div元素，会漏判页面上非div区域的点击；二是未处理下拉框内部的事件冒泡，导致点击下拉框本身也会触发隐藏操作，直接让下拉框无法正常打开。

修正后的代码： #

// 监听整个页面的点击事件
jQuery(document).on('click', function(e) {
    // 检查点击目标是否不在下拉框容器及其子元素范围内
    if (!jQuery(e.target).closest('.vodiapicker').length) {
        $(".b").hide();
    }
});

// 阻止下拉框内部的点击事件向上冒泡
jQuery('.vodiapicker').on('click', function(e) {
    e.stopPropagation();
});

逻辑说明： #

• closest('.vodiapicker')会从点击目标开始向上查找是否存在.vodiapicker容器，若找不到则说明点击的是外部区域，此时执行隐藏下拉框的操作。
• 给.vodiapicker绑定点击事件并阻止冒泡，确保点击下拉框的展开按钮、选项等内部元素时，不会触发页面级的隐藏逻辑，保证下拉框能正常打开和选择。

另外注意，你原代码里的"是HTML转义字符，实际编写代码时直接使用单引号或双引号即可，避免出现语法错误。

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