jQuery的問題：點擊頂部

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衝突。我使用可拖動和調整大多數可點擊的元素。

我試過改變z-indexclick，這可能會工作一次，但它不會在它已被移動後來回切換。

Answer 1

只需要一個表示z-索引的計數器並在每次雙擊一個圓時增加它。修改相應窗口的z-index。

$(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 { 
 
\t border-radius: 50%; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t 
 
} 
 
.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>

希望這有助於。