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的+下一个兄弟选择器。

关于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：我使用过其他的classNames来预防头痛。通常一个弹出窗口显示在屏幕中心，而不是下面其他一些元素就像你做的那样...随意根据需要编辑我的课程。

Answer 2

尝试在显示之前隐藏两个蓝色，以确保一次只有一个：

jsfiddle.net/2sxy9mzw /

我所做的只是在$bg.data("activated", 1);

之前添加了一行

是：

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

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

2 个答案: