点击Div外部隐藏Div的实现尝试均失败，求解决方案

嘿，我来帮你搞定这个问题！你现在的核心需求是：点击按钮显示对应弹窗，弹窗要保持显示直到点击页面背景或者其他按钮——而且点击其他按钮时，得先关掉当前打开的弹窗，再打开新的。之前用mouseout导致鼠标一移开弹窗就消失，这明显不符合需求，咱们换个思路来实现：

核心思路 #

1. 移除所有mouseout相关的事件绑定，这是弹窗自动消失的根源。
2. 给每个按钮绑定点击事件：点击时先关闭所有已打开的弹窗，再打开当前按钮对应的目标弹窗。
3. 给页面背景（比如body）绑定点击事件，触发时关闭所有弹窗，但要排除按钮和弹窗本身的点击（不然点按钮或弹窗内部也会关掉）。

完整代码示例 #

HTML结构

<button class="btn" data-target="div1">按钮1</button>
<button class="btn" data-target="div2">按钮2</button>
<button class="btn" data-target="div3">按钮3</button>
<button class="btn" data-target="div4">按钮4</button>

<div id="div1" class="target-div">弹窗1的内容</div>
<div id="div2" class="target-div">弹窗2的内容</div>
<div id="div3" class="target-div">弹窗3的内容</div>
<div id="div4" class="target-div">弹窗4的内容</div>

CSS样式

.target-div {
  display: none;
  position: absolute;
  padding: 15px;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  /* 可以根据需求调整定位，比如相对于按钮位置 */
  top: 40px;
  left: 10px;
}

.btn {
  margin: 0 5px;
  padding: 8px 12px;
  cursor: pointer;
}

JavaScript逻辑（用jQuery实现）

$(document).ready(function() {
  // 按钮点击事件：切换弹窗
  $('.btn').on('click', function(e) {
    // 阻止事件冒泡到body，避免点击按钮时触发背景关闭逻辑
    e.stopPropagation();
    
    const targetId = $(this).data('target');
    // 先关闭所有弹窗
    $('.target-div').hide();
    // 打开当前按钮对应的弹窗
    $('#' + targetId).show();
  });

  // 点击页面背景（body）关闭所有弹窗
  $('body').on('click', function() {
    $('.target-div').hide();
  });

  // 点击弹窗内部时，不关闭弹窗
  $('.target-div').on('click', function(e) {
    e.stopPropagation();
  });
});

关键细节解释 #

• e.stopPropagation()：这个方法是核心！它能阻止事件向上冒泡到父元素。比如点击按钮时，如果不阻止冒泡，事件会传到body，触发背景关闭逻辑，导致弹窗刚打开就被关掉；点击弹窗内部时同理，避免误关。
• 先关后开：点击新按钮时先关闭所有弹窗，再打开目标弹窗，完美实现“切换弹窗”的需求。
• 移除mouseout：彻底去掉了鼠标移开就隐藏的逻辑，让弹窗的显示/隐藏完全由点击事件控制。

如果你需要弹窗相对于按钮定位，还可以在按钮点击时获取按钮的位置，动态设置弹窗的top和left值，比如：

const btnPos = $(this).offset();
$('#' + targetId).css({
  top: btnPos.top + $(this).outerHeight() + 5 + 'px',
  left: btnPos.left + 'px'
}).show();

这样弹窗就会出现在按钮的下方，更符合用户习惯~

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