是否可以创建一个像这样工作的“阅读更多”按钮：
按钮会是一张照片（我没有这个问题），内容在照片下面（这里，到目前为止，我是按position:absolute原则做的，可惜展示完内容后，剩下的页面没有被下推，文本本身在下一个 div 'ami) 的上方。单击时，文本从照片下方出来，推动其余的容器。当您再次单击时，文本会返回，隐藏在照片下方。
在 display: none 和 display: block or visible 等之间的切换功能很遗憾是不可能的，因为内容必须滑下坡。
不使用 jQuery 对我来说很重要。
如果我没有解释清楚，我会回答问题，马丁
【问题讨论】：
标签： javascript html css slide
你可以只用 CSS 来做，这里是一个例子：
这个想法是在你的文本区域之前创建一个具有唯一 ID 的隐藏复选框，然后创建一个带有 for 属性的标签并放置该复选框 ID ，最后使用 CSS 检查复选框是否被选中，如果选中将特定样式添加到它的下一个元素，例如 #showMore:checked + .someText ，则符号 + 表示仅将此样式应用于下一个 .someText 类，在这种情况下，该类必须在复选框之后并且在同一个父级内, 而符号 ~ 表示将此样式应用于所有 .theButton 属于同一父级的兄弟姐妹的类。
.someText{
height:50px;
overflow:hidden;
display:block;
padding:10px;
border:1px solid #444;
}
.theButton{
background: #444;
color:#fff;
padding:10px;
display:block;
width:100px;
margin:10px auto;
text-align:center;
cursor:pointer;
position:relative;
}
.theButton:after{
content:"Read More";
}
#showMore:checked + .someText{
height:100%;
}
#showMore:checked ~ .theButton:after{
content:"Read Less";
}<input type="checkbox" id="showMore" hidden />
<div class="someText">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<label class="theButton" for="showMore"></label>【讨论】：
这就是我的想象。您可以复制此代码，它是完整的。不幸的是，第一个容器的内容并没有压下第二个容器，而是覆盖了它。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 16px;
}
.container {
width: 500px;
margin: 0 auto;
height: 1000px;
background-color: grey;
}
.first {
position: relative;
}
.firstButton {
position: absolute;
height: 500px;
width: 100%;
background-color: red;
z-index: 100;
}
.firstButton:hover {
cursor: pointer;
}
.firstContent {
width: 100%;
height: 500px;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
z-index: 99;
background-color: yellow;
transition: 0.5s;
}
.firstContentShow {
top: 500px;
}
.second {
position: relative;
}
.secondButton {
width: 100%;
height: 500px;
background-color: green;
position: absolute;
z-index: 98;
}
</style>
</head>
<body>
<div class="container">
<div class="first">
<div class="firstButton" onclick="showFirstContent()"></div>
<div class="firstContent"></div>
</div>
<div class="second">
<div class="secondButton"></div>
<div class="secondContent"></div>
</div>
</div>
<script>
function showFirstContent() {
var content = document.querySelector(".firstContent");
content.classList.toggle("firstContentShow");
}
</script>
</body>
</html>
【讨论】：
如果您在将内容向下推时尝试隐藏和显示文本（并且可以使用硬编码的高度），这里有一个基于您的代码的选项。这使用类似于@Ahmed Tag Amer 的复选框方法，并修复了可访问性（不透明度/位置而不是显示：隐藏）和元素顺序的更改。
我使用<input type="checkbox"> 和<label> 来确定元素是显示还是隐藏（未检查或检查输入属性），并使用z-index values 将元素定位到其父元素中。
注意：我没有检查这种方法与浏览器的兼容性。
* {
margin: 0;
padding: 0;
font-family: Open Sans;
font-size: 16px;
box-sizing: border-box;
}
.container {
width: 500px;
margin: auto;
background-color: grey;
padding: 0;
}
#firstButtonCheck {
position: absolute;
opacity: 0;
}
#firstButtonCheck ~ .firstContent {
background-color: yellow;
margin-top: -500px;
width: 500px;
height: 500px;
max-height: 500px;
display: block;
padding: 5px;
transition: margin-top 1s ease-out, max-height 1s ease-out;
}
.firstButton {
display: block;
height: 500px;
width: 500px;
background-color: red;
cursor: pointer;
position: relative;
z-index: 2;
}
#firstButtonCheck:checked ~ .firstContent {
margin-top: 0px;
height: 500px;
max-height: 500px;
transition: margin-top 1s ease-out, max-height 1s ease-out;
}
#secondButtonCheck {
position: absolute;
opacity: 0;
}
#secondButtonCheck ~ .secondContent {
background-color: grey;
margin-top: -500px;
width: 500px;
height: 500px;
max-height: 500px;
display: block;
padding: 5px;
transition: margin-top 1s ease-out, max-height 1s ease-out;
}
.secondButton {
display: block;
height: 500px;
width: 500px;
background-color: green;
cursor: pointer;
position: relative;
z-index: 1;
}
#secondButtonCheck:checked ~ .secondContent {
margin-top: 0px;
height: 500px;
max-height: 500px;
transition: margin-top 1s ease-out, max-height 1s ease-out;
}
.secondContent {
height: 500px;
}<div class="container">
<input type="checkbox" id="firstButtonCheck" />
<label class="firstButton" for="firstButtonCheck">Picture Here</label>
<div class="firstContent">
<h1>First Content</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
<input type="checkbox" id="secondButtonCheck" />
<label class="secondButton" for="secondButtonCheck">Picture Here</label>
<div class="secondContent">
<h1>Second Content</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </div>
</div>
</div>【讨论】：