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

Question

I have spent hours trying to figure out how to simply have a DIV slide over another DIV below it, rather that move the DIV down with it. 我花了几个小时试图弄清楚如何简单地将DIV幻灯片放在其下的另一个DIV上，而不是随其向下移动DIV。

The set up is fairly simple. 设置非常简单。 I have found a script that revels more text when the 'Show More' button is clicked. 我发现了一个脚本，当单击“显示更多”按钮时，该脚本可以显示更多文本。 I have tried playing around with properties like; 我试过玩类似的属性； display, z-index, position and a few others to no avail. 显示，z-index，位置和其他一些方法均无济于事。 Below is the code I am working with. 以下是我正在使用的代码。

I would like to be able to click the 'Show More' button to then have the DIV with Text 1 to slide over the the DIV below it with Text 2. 我希望能够单击“显示更多”按钮，然后使带有文本1的DIV滑过带有文本2的DIV。

Thanks so much in advance! 非常感谢！

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

Answer 1

Personally I would use a toggle class method or add a class and let CSS handle the transition/position of the divs. 我个人将使用切换类方法或添加一个类，然后让CSS处理div的过渡/位置。 Also check out transformations! 还检查转换！ This would be an ideal candidate for a translation. 这将是翻译的理想人选。

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

HTML HTML

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

CSS 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 jQuery的

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

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

问题描述

1 个解决方案

解决方案1
1 2018-08-08 20:34:15

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

问题描述

1 个解决方案

解决方案1 1 2018-08-08 20:34:15

解决方案1
1 2018-08-08 20:34:15