Question

我花了数小时试图弄清楚如何简单地将DIV幻灯片放在其下的另一个DIV上，而不是随其向下移动DIV。

设置非常简单。我发现了一个脚本，当单击“显示更多”按钮时，该脚本可以显示更多文本。我试过玩类似的属性；显示，z-index，位置和其他一些方法均无济于事。下面是我正在使用的代码。

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

非常感谢！

Public Class MyFunctions

    Public Sub SomeMethod()

        'No need for Imports because they are in the same Namespace.
        Dim objMyFunctions As New MyFunctions()

    End Sub 

End Class

Public Class MyFunctions

End Class

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

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 个答案: