Div按下按钮向下滑动，向下滚动后消失

Question

我想知道如何在点击一个角度向下按钮后显示div，它会以与Quora相同的方式消失：当您点击主页上的答案时，您可以通过单击使其消失答案底部的退出按钮或向下滚动足够长的时间。）

图片说明：

所以基本上我会有一个带有摘要的产品列表，如果你点击产品的角度向下按钮，div向下滑动以显示更多信息（向下移动下一个产品，没有重叠），这个div可以消失使用退出按钮并向下滚动Quora风格。

如果您有任何问题，请告诉我。

干杯！ 皮尔

Answer 1

我在这里做了一个简单的例子，如果您对此有任何疑问，请告诉我。

＆＃13;

＆＃13;

var classname = document.getElementsByClassName("open");

function toggleValue(current, first, second) {
  return current === first ? second : first
}

function toggleFunc() {
  this.style.letterSpacing = toggleValue(this.style.letterSpacing, '-10px', '-1px')
  this.parentNode.style.maxHeight = toggleValue(this.parentNode.style.maxHeight, '1000px', '200px')
}

Array.from(classname).forEach(function(element) {
  element.addEventListener('click', toggleFunc);
});

＆＃13;

p {
  font-size: 1.2rem
}
article {
  position: relative;
  overflow: hidden;
  transition: max-height 1s;
  max-height: 200px;
  padding: 2rem;
  text-align: justify;
}
article header {
  text-align: center;
  font-size: 4rem
}
.open {
  font-size: 2rem;
  position: absolute;
  bottom: 0;
  left: calc(50% - 2rem);
  font-weight: bold;
  padding: 0.7rem 1.5rem;
}

＆＃13;

<article>
  <header>Title</header>
  <p>Lorem ipsum dolor sit amet, clita noluisse cum id, utamur propriae persequeris eu ius, cum cu praesent tincidunt. In vim volumus scriptorem. Timeam oportere nam eu, ad eum mucius bonorum. Cu sed indoctum repudiandae. Homero reprehendunt duo ad, no est
    modus harum. Nibh offendit ut duo, iudico corrumpit eos cu. Et pri sint officiis elaboraret, mazim petentium sed no. Dicit nusquam insolens eu eos. Mel in mucius imperdiet, essent eligendi scribentur mei no. Amet gloriatur his cu, eam te simul cetero
    gloriatur, an modus mediocrem his. Ad vel veri voluptaria instructior, at dicunt vidisse petentium duo. Cu sit purto reque ipsum, eos an omnis integre definitiones, an sit alienum offendit. Eu meis viderer has, hinc nostro aeterno est ex. Ridens denique
    nam ut, vim solum fabulas ad, mel nisl dicunt qualisque no. Ut nec nemore tractatos persecuti, ea libris diceret ius. Ex probo diceret sea, detracto quaestio ullamcorper pro ex, labitur tractatos scripserit his te. Quas sanctus meliore te vel, ne
    eos amet deleniti. Vix quando recteque ne. Id petentium expetendis cum, eos porro ridens ad. Vis solum definitiones ad, vix recteque scripserit temporibus id. Mel molestie maluisset cu, cu his falli aeque mundi. Vix nemore adipisci in. At qui nihil
    deterruisset, eos nibh viderer no. Scripta euismod euripidis an vel, pri ea mutat virtute expetendis, wisi accusam est at.</p>
  <button class="open">\/</button>
</article>

<article>
  <header>Title</header>
  <p>Lorem ipsum dolor sit amet, clita noluisse cum id, utamur propriae persequeris eu ius, cum cu praesent tincidunt. In vim volumus scriptorem. Timeam oportere nam eu, ad eum mucius bonorum. Cu sed indoctum repudiandae. Homero reprehendunt duo ad, no est
    modus harum. Nibh offendit ut duo, iudico corrumpit eos cu. Et pri sint officiis elaboraret, mazim petentium sed no. Dicit nusquam insolens eu eos. Mel in mucius imperdiet, essent eligendi scribentur mei no. Amet gloriatur his cu, eam te simul cetero
    gloriatur, an modus mediocrem his. Ad vel veri voluptaria instructior, at dicunt vidisse petentium duo. Cu sit purto reque ipsum, eos an omnis integre definitiones, an sit alienum offendit. Eu meis viderer has, hinc nostro aeterno est ex. Ridens denique
    nam ut, vim solum fabulas ad, mel nisl dicunt qualisque no. Ut nec nemore tractatos persecuti, ea libris diceret ius. Ex probo diceret sea, detracto quaestio ullamcorper pro ex, labitur tractatos scripserit his te. Quas sanctus meliore te vel, ne
    eos amet deleniti. Vix quando recteque ne. Id petentium expetendis cum, eos porro ridens ad. Vis solum definitiones ad, vix recteque scripserit temporibus id. Mel molestie maluisset cu, cu his falli aeque mundi. Vix nemore adipisci in. At qui nihil
    deterruisset, eos nibh viderer no. Scripta euismod euripidis an vel, pri ea mutat virtute expetendis, wisi accusam est at.</p>
  <button class="open">\/</button>
</article>

＆＃13;

＆＃13;

＆＃13;