使用jQuery

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)
}