使用jQuery更改html的順序

Question

我有一個顯示和隱藏內容的函數。我無法弄清楚的唯一情況是，如何隨時顯示最近顯示的元素，使其在淡出時始終顯示在其他元素的頂部。如果你從左到右點擊按鈕，你可以看到我想如何工作。但是，由於html的順序，從左到右的工作方式不同。我想過使用索引，但我想不出如何使其工作。幫我？

$(document).ready(function(){ 
 
    $(".click").click(function(){ 
 
     
 
    var current_sec = $(this).data("section"); 
 
    $(".sections").not(this).removeClass("show"); 
 
    $('.click').not(this).removeClass("clicked"); 
 
    
 
    if($(this).hasClass("clicked")){ 
 
     $("#" + current_sec).removeClass("show"); 
 
     $(this).removeClass("clicked"); 
 
    } else{ 
 
     $(this).addClass("clicked"); 
 
     $("#" + current_sec).addClass("show"); 
 
     $(".show_all").removeClass("all_open"); 
 
     $(".show_all").html("Our skills"); 
 
    } 
 
    }); 
 
    
 
    $(".show_all").click(function(){ 
 
    if($(".show_all").hasClass("all_open")){ 
 
     $(".sections").removeClass("show"); 
 
     $(".show_all").removeClass("all_open"); 
 
     $(".click").removeClass("clicked"); 
 
     $(".show_all").html("Our skills"); 
 
    } else{ 
 
     $(".sections").addClass("show"); 
 
     $(".show_all").addClass("all_open"); 
 
     $(".show_all").html("close skills"); 
 
    } 
 
    }); 
 
});

.click{ 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
    margin: 0 20px; 
 
    cursor: pointer; 
 
} 
 

 
#one{ 
 
    background-color: lightblue; 
 
} 
 

 
#two{ 
 
    background-color: yellow; 
 
} 
 

 
#three{ 
 
    background-color: red; 
 
} 
 

 
#four{ 
 
    background-color: orange; 
 
} 
 

 
.sections{ 
 
    width: 500px; 
 
    font-size: 18px; 
 
    max-height: 0px; 
 
    overflow: hidden; 
 
    opacity: 0; 
 
    transition: all 1.5s ease; 
 
} 
 

 
.show{ 
 
    opacity: 1; 
 
    max-height: 1000px; 
 
} 
 

 
#section_1{ 
 
    background-color: lightblue; 
 
} 
 

 
#section_2{ 
 
    background-color: yellow; 
 
} 
 

 
#section_3{ 
 
    background-color: red; 
 
} 
 

 
#section_4{ 
 
    background-color: orange; 
 
} 
 

 
.show_all{ 
 
    font-weight: 800; 
 
    color: black; 
 
}

<div id="one" class="click" data-section="section_1"></div> 
 
<div id="two" class="click" data-section="section_2"></div> 
 
<div id="three" class="click" data-section="section_3"></div> 
 
<div id="four" class="click" data-section="section_4"></div> 
 

 
<div class="sections" id="section_1"> 
 
    <div class="box"></div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. <a href="#" class="show_all">our skills</a></p> 
 
</div> 
 

 
<div class="sections" id="section_2"> 
 
    <div class="box"></div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. <a href="#" class="show_all">our skills</a></p> 
 
</div> 
 

 
<div class="sections" id="section_3"> 
 
    <div class="box"></div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. <a href="#" class="show_all">our skills</a></p> 
 
</div> 
 

 
<div class="sections" id="section_4"> 
 
    <div class="box"></div> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. <a href="#" class="show_all">our skills</a></p> 
 
</div> 
 

 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

Answer 1

存儲的z-index在變量中。在每次點擊時增加它，並將其分配給顯示的部分。這樣，最新顯示的部分將始終處於最佳狀態。

var zIndex = 1; 

$(".click").click(function(){ 
    // ... 
    $("#" + current_sec).addClass("show").css("z-index", ++zIndex) 
} 

Answer 2

像這樣，但你有一個影響新的問題。

 ... 
     $(this).removeClass("clicked"); 
    } else{ 
     // move the div on top, after last .click 
     $('.click:last').after($("#" + current_sec)); 

     $(this).addClass("clicked"); 
     ...