Div随着按钮向下滑动并在向下滚动后消失

Question

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

的图像来说明：

所以基本上我都会有相关的产品清单与总结，如果你点击的角度下一个产品一个div滑下透露更多信息的按钮（减挡下一个产品，没有重叠），这个div可以通过退出按钮并通过向下滚动Quora风格消失。

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

干杯！ Pierre

Answer 1

我做了一个简单的例子，让我知道你是否对此有任何疑问。

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); 
 
});

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

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