單擊“顯示更多”按鈕時，將Div滑過Div

Question

我花了幾個小時試圖弄清楚如何簡單地將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>

Answer 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');
});

單擊“顯示更多”按鈕時，將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