时间戳

首页 > 解决方案 > 向下滑动以显示更多内容

javascript - 向下滑动以显示更多内容

问题描述

好的，所以我知道我以前做过这个，但是我已经从一个很长的自行车旅行回来两天了，我不记得最好的方法了。但是我有一些内容，我希望有一个链接可以向下滑动以显示更多内容。

我在这里有一个演示： https ://codepen.io/ultraloveninja/pen/VGORZN/

哪个排序做我想要的，但我不是 100% 确定我需要使用什么，slideToggle而不是仅仅劫持 CSS 并添加高度以将其向下扩展。

这是我的 JS：

 $(".show-more").on("click", function() {
    $(".items").css("height","100%");
  });

这是我的CSS：

.items {
  height:100px;
  overflow: hidden;
}

.wrapper {
  display: flex;
}

.show-more {
  margin: 10px auto;
  display: block;
  text-align: center;
}

这是我的 HTML：

<div class="items">
  <div class="wrapper">
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p>All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
      <p></p>
    </div>
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p>All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p>All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
  </div>

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

再一次，我试图让它像 aslideToggle或其他东西那样动画。只是不确定做某事是否更好，例如，在其上添加一个课程并做一个toggleClass代替，或者是否有更好的方法来解决它。

标签： javascriptjqueryhtmlcssslidetoggle

解决方案

.slideDown()可能是您正在寻找的方法。这是我的解决方案：

$(document).ready(function() {
  $(".show-more").on("click", function() {
    $(".extended-content").slideDown(1000);
  });
});
body {
  padding: 20px;
}

.items {
  height:100%;
}

.wrapper {
  display: flex;
}

.show-more {
  margin: 10px auto;
  display: block;
  text-align: center;
}

.extended-content {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items">
  <div class="wrapper">
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
    <div class="thing">
      <h2>This title</h2>
      <p>A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. Words are like wind. And now his watch is ended. Bastards are born of passion, aren't they? We don't despise them in Dorne. King in the North.</p>
      <p class="extended-content">All men must die. It's ten thousand miles between Kings landing and the wall. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. The wolf and the lion. All men must die.</p>
    </div>
  </div>
 
</div>
 <a class="show-more" href="#">Show More</a>

我已经添加并且我已经将类添加height: 100%到具有属性的元素中，并且在单击时将显示为向下滑动的动画效果。.itemsextended-contentpdisplay:false#show-more

推荐阅读