Javascript 当元素已处于活动状态时关闭jquery弹出窗口

我已经从这个网站上的另一位伟大的用户那里得到了很多帮助，我很好奇是否有人可以在这个代码上再问一个问题。 这基本上就是我所处的位置。 一个鼠标悬停在灰色框上以突出显示屏幕上的元素。单击一个灰色元素时，会出现一个蓝色框，高亮显示的元素也会保持不变。如果单击了新的蓝色元素，则红色框将消失，蓝色框将消失，悬停功能将相应地在之后运行。如果一个元素处于活动状态，并且我想单击另一个灰色元素，那么当前会弹出另一个新元素，给我两个蓝色框。我只希望一次激活相应的蓝色框。因此，如果元素1蓝色框处于活动状态，我想单击元素2，并在激活蓝色框2的同时停用蓝色框1

这是我目前所在的位置

html

剧本

$(".bg").each(function(){
  var $bg  = $(this);
  var $bg2 = $bg.nextAll('.bg2:first');
  var $bgP = $bg.nextAll('.bgpopup:first');
  $bg.data("activated", 0).hover(function(){
    if($bg.data("activated") === 0) $bg2.toggle();
  }).click(function(){
    $bg.data("activated", 1);
    $bgP.show().on("click", function(){
      $bg.data("activated", 0);
      $bg2.add( this ).hide();
    });
  });
});

---

在这种情况下，使用link并且知道HTML在将来不会更改（因为顺序很重要！），我几乎都会使用CSS的

+

下一个同级选择器来完成

关于jQuery，我会将其保持在最低限度，并专门用于切换CSS类：

var$bg=$（“.bg”）；//缓存所有按钮
$（“.bg”）。在（“单击”，函数（）{
$bg.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
$（“.blue”）。在（“单击”，函数（）{
$bg.removeClass（“活动”）；
});
.bg{
背景：#ccc；
边缘顶部：10px；
宽度：200px；
高度：120px；
过渡：0.3s；
}
.bg:悬停{
背景：#000；
}
瑞德先生{
位置：绝对位置；
顶部：250px；
左：250px；
背景：红色；
宽度：200px；
高度：120px；
可见性：隐藏；
过渡：0.3s；
光标：指针；
不透明度：0；
}
.bg:悬停+红色{
能见度：可见；
z-索引：2；/*优先级（覆盖）悬停-在活动索引上*/
不透明度：1；
}
.bg.active+红色{
能见度：可见；
z指数：1；/*保持在悬停指数以下*/
不透明度：1；
}
.bg.active+红色+蓝色{
显示：块；
}
蓝先生{
背景：蓝色；
宽度：200px；
高度：120px；
显示：无；
}

1.
1.
1.
2.
2.
2
在出现一个蓝色之前，尝试隐藏两个蓝色，以确保一次只有一个：

jsfiddle.net/2sxy9mzw/

我所做的只是在
$bg.data（“已激活”，1）前添加一行

这是：

$('.bgpopup').hide();

如果您打开“2blue”，然后将鼠标悬停在“1gray”>上，则“1red”不可见。此外，单击“1gray”上的“1blue”会出现，但它的“1red”不会出现。（我的坏习惯，因为jQ主要是我的一些深夜编码）
$(".bg").each(function(){
  var $bg  = $(this);
  var $bg2 = $bg.nextAll('.bg2:first');
  var $bgP = $bg.nextAll('.bgpopup:first');
  $bg.data("activated", 0).hover(function(){
    if($bg.data("activated") === 0) $bg2.toggle();
  }).click(function(){
    $bg.data("activated", 1);
    $bgP.show().on("click", function(){
      $bg.data("activated", 0);
      $bg2.add( this ).hide();
    });
  });
});

$('.bgpopup').hide();