javascript - 当元素已经处于事件状态时关闭 jquery 弹出窗口

Question

我已经从该站点的另一位优秀用户那里得到了很多帮助，我很好奇是否有人可以帮助解决有关此代码的另一个问题。 这基本上就是我所在的位置。 将鼠标悬停在灰色框上以突出显示屏幕上的元素。单击一个灰色元素时，会出现一个蓝色框，突出显示的元素也会保留。如果单击新的蓝色元素，红色框消失，蓝色框消失，悬停相应地起作用。如果一个元素处于事件状态，并且我想单击另一个灰色元素，则当前会弹出另一个新元素，给我两个蓝色框。我只希望相应的蓝色框一次处于事件状态。因此，如果元素 1 的蓝色框处于事件状态，我想单击元素 2，并停用蓝色框 1，同时激活蓝色框 2。

这是我现在的位置

html

<div class="bg">1</div>
<div class="bg2">1</div>
<div class="bgpopup">1</div>

<div class="bg">2</div>
<div class="bg2">2</div>
<div class="bgpopup">2</div>

CSS

.bg {
  background: #ccc;
  width: 200px;
  height: 120px;
}
.bg:hover {
  background: #000;
}
.bg2 {
  position:absolute; top:250px;
  left:250px;
  background: red;
  width: 200px;
  height: 120px;
  display:none;
}
.bgpopup {
  background: blue;
  width: 200px;
  height: 120px;
  display:none;
}

脚本

$(".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();
    });
  });
});

带有链接 http://jsfiddle.net/skinnyb/0vvk945y/8/

Answer 1

在那种情况下，并且知道 HTML 将来不会更改(因为顺序很重要!)我几乎都会使用 CSS 的 + next-sibling 选择器来完成它。

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

var $bg = $(".bg"); // Cache all buttons

$(".bg").on("click", function(){
  $bg.removeClass("active");
  $(this).addClass("active");
});

$(".blue").on("click", function(){
  $bg.removeClass("active");
});

.bg {
  background: #ccc;
  margin-top: 10px;
  width: 200px;
  height: 120px;
  transition:0.3s;
}
.bg:hover {
  background: #000;
}

.red {
  position: absolute;
  top: 250px;
  left: 250px;
  background: red;
  width: 200px;
  height: 120px;
  visibility:hidden;
  transition: 0.3s;
  cursor:pointer;
  opacity: 0;
}
.bg:hover  + .red{
  visibility: visible;
  z-index:2; /* prioritize (overlay) hovered - over active ones*/
  opacity: 1;
}
.bg.active + .red{
  visibility: visible;
  z-index:1; /* keep below hovered ones */
  opacity: 1;
}
.bg.active + .red + .blue{
  display: block;
}

.blue {
  background: blue;
  width: 200px;
  height: 120px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bg">1</div>
<div class="red">1</div>
<div class="blue">1</div>

<div class="bg">2</div>
<div class="red">2</div>
<div class="blue">2</div>

PS:我使用其他类名来防止头痛。通常在屏幕中心显示一个弹出窗口，而不是像您那样在其他元素下方显示...您可以根据需要随意编辑我的类。