Question

好吧，所以我知道我以前做过这件事，但是距离自行车旅行很长才两天，所以我不记得这样做的最佳方法。但是我有一些内容，我想要一个向下滑动的链接以显示更多内容。

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

哪个 sorta 可以满足我的要求，但是我不确定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>

我再次尝试使其像slideToggle之类的动画。只是不确定是否最好做一些事情，例如在其上添加一个类并改而toggleClass，或者是否有更好的方法来解决这个问题。

Answer 1

.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%添加到.items，并将类extended-content添加到具有属性p的{{1}}元素中，并显示为单击display:false时会产生向下滑动的动画效果。

向下滑动以显示更多内容

1 个答案: