单击“显示更多”按钮时，Div 滑过 Div答案

【问题标题】：Div slide over Div when 'Show More' button clicked单击“显示更多”按钮时，Div 滑过 Div
【发布时间】：2018-08-08 20:24:21
【问题描述】：

我花了几个小时试图弄清楚如何简单地让一个 DIV 滑过它下面的另一个 DIV，而不是把 DIV 一起向下移动。

设置相当简单。我找到了一个脚本，当单击“显示更多”按钮时，它会显示更多文本。我尝试过使用以下属性；显示，z-index，位置和其他一些无济于事。下面是我正在使用的代码。

我希望能够单击“显示更多”按钮，然后让带有文本 1 的 DIV 滑过带有文本 2 的 DIV。

提前非常感谢！

    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <script>
$(document).ready(function(){ 
$(".show-more a").on("click", function() {
  var $this = $(this);
  var $content = $this.parent().prev("div.content");
  var linkText = $this.text().toUpperCase();

  if (linkText === "SHOW MORE") {
    linkText = "Show less";
    $content.switchClass("hideContent", "showContent", 400);
  } else {
    linkText = "Show more";
    $content.switchClass("showContent", "hideContent", 400);
  };

  $this.text(linkText);
});});

    </script>

    <style>

.text-container {
margin: 0 auto;
width: 60%;
border: 1px black solid;
}

.hideContent {
overflow: hidden;
line-height: 1em;
height: 2em;  
}

.showContent {
line-height: 1em;
height: auto;
}

.showContent {
height: auto;
}


.show-more {
padding: 10px 0;
text-align: center;
z-index: 999;
position: relative;
overflow: hidden;
display: block;   
}

.text-container-stay {
margin: 0 auto;
width: 60%;
border: 1px black solid; 
height: 200px; 
z-index: 1;
        }

    </style>

<div class="text-container">

  <div class="content hideContent">
    Text 1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  </div>
  <div class="show-more">
    <a href="#">Show more</a>
  </div>
</div>

    <div class="text-container-stay">    Text 2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </div>


    </body>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我个人会使用切换类方法或添加一个类并让 CSS 处理 div 的转换/位置。还要检查转换！这将是翻译的理想候选者。

我创建了一个小提琴：https://jsfiddle.net/1q5pen4L/3/

HTML

<div id="one">
Stuff
</div>
<div id="two">
Other Stuff
</div>
<button id="do_stuff">
Do Stuff
</button>

CSS

div {
  width: 200px;
  background-color: red;
  height: 100px;
  transition: .3s all;
}
div:last-of-type {
  background-color: green;
}

#one.active {
  transform: translateY(100%);
}

jQuery

$("#do_stuff").click( function () {
    $("#one").toggleClass('active');
});

【讨论】：