使用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"); 
     ...