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

這樣，但是您會產生新的問題。

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

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

Answer 2

將z-index存儲在變量中。 每次單擊將其遞增，然后將其分配給顯示的部分。 這樣，最新顯示的部分將始終位於頂部。

var zIndex = 1;

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