如何实现多按钮对应Div的显示切换，点击页面任意区域隐藏对应Div

你的思路存在的问题 #

1. HTML传参错误：onClick="toggleViz(box-a)"中box-a会被解析为变量而非字符串，正确写法应传递字符串ID：onClick="toggleViz('box-a')"
2. JS事件绑定逻辑错误：
   • 全局函数toggleViz里的this并不指向触发点击的按钮，this.click(...)的写法完全错误
   • 每次点击按钮都会给document绑定新的点击事件，多次点击后会导致隐藏逻辑重复执行，引发bug

优化后的实现方案 #

以下提供两种可行方案，均避免重复绑定事件，同时实现点击按钮显对应Div、点击其他区域隐藏的需求：

方案一：修正你的原生onClick思路

HTML

<div class="buttons-div">
    <div class="buttons" onClick="toggleViz('box-a')">A</div>
    <div class="buttons" onClick="toggleViz('box-b')">B</div>
</div>

<div id="boxes-div" style="z-index: 7">
    <div class="boxes" id="box-a" style="display: none">
        This is box A
    </div>
    <div class="boxes" id="box-b" style="display: none">
        This is box B
    </div>
</div>

JS

// 存储当前显示的盒子元素
let activeBox = null;

function toggleViz(idname) {
    const $targetBox = $('#' + idname);
    // 阻止事件冒泡到document，避免刚显示就被隐藏
    event.stopPropagation();
    
    // 逻辑：当前盒子显示则隐藏；否则先隐藏其他盒子再显示当前
    if ($targetBox.is(':visible')) {
        $targetBox.fadeOut(200);
        activeBox = null;
    } else {
        if (activeBox) {
            activeBox.fadeOut(200);
        }
        $targetBox.toggle();
        activeBox = $targetBox;
    }
}

// 仅给document绑定一次点击事件
$(document).click(function() {
    if (activeBox && activeBox.is(':visible')) {
        activeBox.fadeOut(200);
        activeBox = null;
    }
});

方案二：jQuery事件委托（更优解，HTML结构更干净）

通过data属性关联按钮与对应盒子，无需在HTML中写onClick，符合关注点分离原则：

HTML

<div class="buttons-div">
    <div class="buttons" data-target="box-a">A</div>
    <div class="buttons" data-target="box-b">B</div>
</div>

<div id="boxes-div" style="z-index: 7">
    <div class="boxes" id="box-a" style="display: none">
        This is box A
    </div>
    <div class="boxes" id="box-b" style="display: none">
        This is box B
    </div>
</div>

JS

let activeBox = null;

$(document).ready(function() {
    // 给所有按钮绑定点击事件
    $('.buttons').click(function(e) {
        e.stopPropagation();
        const targetId = $(this).data('target');
        const $targetBox = $('#' + targetId);
        
        if ($targetBox.is(':visible')) {
            $targetBox.fadeOut(200);
            activeBox = null;
        } else {
            if (activeBox) {
                activeBox.fadeOut(200);
            }
            $targetBox.show();
            activeBox = $targetBox;
        }
    });

    // 点击页面其他区域隐藏盒子
    $(document).click(function() {
        if (activeBox && activeBox.is(':visible')) {
            activeBox.fadeOut(200);
            activeBox = null;
        }
    });
});

CSS（沿用你原有代码即可）

.buttons {
    background-color: lightgray;
    margin: 1rem;
    padding: .5rem;
    width: 1rem;
    cursor: pointer;
}

.boxes {
    background-color: lightgray;
    margin: 1rem;
    padding: .5rem;
    width: 12rem;
}

方案核心说明 #

1. activeBox变量：记录当前显示的盒子，确保同一时间仅显示一个Div，点击其他区域时精准隐藏目标
2. 阻止事件冒泡：按钮点击时调用e.stopPropagation()，避免事件传递到document导致刚显示的盒子立即隐藏
3. 一次性事件绑定：仅给document绑定一次点击事件，避免重复绑定引发的性能问题或逻辑冲突

内容的提问来源于stack exchange，提问作者Glenn Thomas Davis