javascript - jQuery问题:单击图标>显示块>始终位于顶部

html格式：

 <div class="wrapper">

  <div class="desktop_icons">
    <div id="icon1" class="circle">1</div>
    <div id="icon2" class="circle">2</div>
    <div id="icon3" class="circle">3</div>
    <div id="icon4" class="circle">4</div>
  </div>

  <div class="window window1">
    <p>1</p>
  </div>
  <div class="window window2">
    <p>2</p>
  </div>
  <div class="window window3">
    <p>3</p>
  </div>
  <div class="window window4">
    <p>4</p>
  </div>

</div>

css:

.wrapper{
 height: 100vh;
 width: 100%;
}

.circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;

}

.desktop_icons {
  width: 100%;
  display: flex;
}

#icon1 {
  background: red;
  text-align: center;
}

#icon2 {
  background: blue;
  text-align: center;
}

#icon3 {
  background: green;
  text-align: center;
}

#icon4 {
  background: yellow;
  text-align: center;
}

.window {
  height: 50px;
  width: 100px;
  background: white;
  border: 1px solid black;
  text-align: center;
}

.window1 {
  position: absolute;
  top: 15%;
  display: none;
}

.window2 {
  position: absolute;
  top: 16%;
  left: 50px;
  display: none;
}
.window3 {
  position: absolute;
  top: 17%;
  left: 100px;
  display: none;
}

.window4 {
  position: absolute;
  top: 18%;
  left: 150px;
  display: none;
}

查询：

$(function() {
  $(".window").draggable({
    containment: ".wrapper",
    scroll: false,
    stack: ".window",
    distance: 0
  });
});

$(function() {
  $("#icon1,#icon2,#icon3,#icon4").draggable({
    containment: ".wrapper",
    scroll: false,
    stack: ".circle",
    distance: 0
  });
});

$('#icon1').dblclick(function() {
  $('.window1').css("display", "block")
});
$('#icon2').dblclick(function() {
  $('.window2').css("display", "block")
});
$('#icon3').dblclick(function() {
  $('.window3').css("display", "block")
});
$('#icon4').dblclick(function() {
  $('.window4').css("display", "block")
});

Here is an example of what I have so far (Fiddle)
我想能够点击图标，并有相应的窗口来到前面的其他人。我在我的项目中一直在做这方面的工作，但恐怕我有一些jQuery冲突。我在大多数可点击元素上使用draggable和resize。
我试过在z-index上更改click，这可能会工作一次，但在移动之后它不会来回切换。

最佳答案

只要取一个代表z索引的计数器，每次双击一个圆时就增加它。修改相应窗口的z索引。

$(function() {
    $( ".window" ).draggable({ containment: ".wrapper", scroll: false, stack: ".window", distance: 0 });
    });
$(function() {
    $( "#icon1,#icon2,#icon3,#icon4" ).draggable({ containment: ".wrapper", scroll: false, stack: ".circle", distance: 0 });
    });

z = 0;
$('#icon1').dblclick(function(){
    $('.window1').css("display", "block")
    $('.window1').css("z-index", ++z);

});
$('#icon2').dblclick(function(){
    $('.window2').css("display", "block")
    $('.window2').css("z-index", ++z);
});
$('#icon3').dblclick(function(){
    $('.window3').css("display", "block")
    $('.window3').css("z-index", ++z);
});
$('#icon4').dblclick(function(){
    $('.window4').css("display", "block")
    $('.window4').css("z-index", ++z);
});

.wrapper{
 height: 100vh;
 width: 100%;
}
.circle {
	border-radius: 50%;
	width: 50px;
	height: 50px;

}
.desktop_icons{
  width: 100%;
  display: flex;
}
#icon1{
  background: red;
  text-align: center;
}
#icon2{
  background: blue;
  text-align: center;
}
#icon3{
  background: green;
  text-align: center;
}
#icon4{
  background: yellow;
  text-align: center;
}

.window{
  height: 50px;
  width: 100px;
  background: white;
  border: 1px solid black;
  text-align: center;
  z-index: 0;
}
.window1{
  position: absolute;
  top: 15%;
  display: none;

}
.window2{
  position: absolute;
  top: 16%;
  left: 50px;
  display: none;
}
.window3{
position: absolute;
top: 17%;
  left: 100px;
  display: none;
}
.window4{
  position: absolute;
  top: 18%;
  left: 150px;
  display: none;
}

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

  <div class="desktop_icons">
    <div id="icon1" class="circle">1</div>
    <div id="icon2" class="circle">2</div>
    <div id="icon3" class="circle">3</div>
    <div id="icon4" class="circle">4</div>
  </div>

  <div class="window window1">
    <p>1</p>
  </div>
  <div class="window window2">
    <p>2</p>
  </div>
  <div class="window window3">
    <p>3</p>
  </div>
  <div class="window window4">
    <p>4</p>
  </div>

</div>

希望这有帮助。