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インデックスを保管してください。クリックごとに増分して、表示されたセクションに割り当てます。この方法で、最新のセクションが常に上に表示されます。

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