Question

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;
}

jQuery的：

$(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，这可能会有效，但在它已被移动后不会来回切换。

Answer 1

只需使用代表z-index的计数器，并在每次双击圆圈时增加它。修改相应窗口的z-index。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

希望这有帮助。

Jquery问题：点击图标＆gt; <显示块>总在最前面

1 个答案: