我花了几个小时试图找出如何简单地让一个 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>
最佳答案
我个人会使用切换类方法或添加类并让 CSS 处理 div 的转换/位置。还要检查转换!这将是翻译的理想人选。
我创建了一个 fiddle :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');
});
关于javascript - 单击 'Show More' 按钮时 Div 滑过 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51755087/