WordPress搜索框交互问题：点击外部区域无法隐藏搜索框

原代码的问题点 #

• 变量名错误：无效代码里获取的元素存在box变量中，却用未定义的x去访问，直接导致代码报错无法执行。
• 属性不匹配：切换逻辑用display控制显示隐藏，无效代码却用visibility属性做判断，两者逻辑不对应。
• 未排除目标元素：点击搜索图标或搜索框本身时，也会触发隐藏逻辑，和切换功能冲突。

修正后的完整代码 #

<script>
// 切换搜索框显示/隐藏
function myFunction() {
    const searchBox = document.getElementById("myDIV");
    // 切换display状态
    searchBox.style.display = searchBox.style.display === "block" ? "none" : "block";
}

// 点击外部隐藏搜索框
document.addEventListener('click', function handleClickOutsideBox(event) {
    const searchBox = document.getElementById('myDIV');
    const searchIcon = document.querySelector('#search-icon'); // 替换成你实际的搜索图标ID

    // 搜索框不存在或未显示时，直接返回
    if (!searchBox || searchBox.style.display !== "block") return;

    // 点击的是搜索框或图标本身时，不执行隐藏
    if (searchBox.contains(event.target) || searchIcon.contains(event.target)) {
        return;
    }

    // 隐藏搜索框
    searchBox.style.display = "none";
});
</script>

注意事项 #

• 把代码里的#search-icon替换成你网站搜索图标实际的HTML元素ID（比如图标按钮的ID）。
• 提前给搜索框设置初始隐藏状态：在CSS里添加#myDIV { display: none; }，确保第一次点击图标能正常显示。

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