Слайд вниз, чтобы показать больше контента - PullRequest
Новая
       5

Слайд вниз, чтобы показать больше контента

0 голосов
/ 25 сентября 2018

Хорошо, я знаю, что делал это раньше, но я два дня назад после очень долгой поездки на велосипеде, и я не могу вспомнить лучший способ сделать это.Но у меня есть какой-то контент, который я хочу, чтобы ссылка скользила вниз, чтобы показать больше.

У меня есть демо здесь: 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>

Опять же, я пытаюсь оживить его как slideToggle или что-то на этот счет.Просто не уверен, что лучше что-то сделать, например, прикрепить к нему класс и вместо этого сделать toggleClass или есть лучший способ сделать это.

1 Ответ

0 голосов
/ 25 сентября 2018

.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, обладающим свойствомdisplay:false и будет отображаться с эффектом анимации скольжения при нажатии #show-more.

...