如何将"Close"按钮添加到纯CSS向下滑动功能中？

Question

我对应用有趣的代码来构建我的网站非常感兴趣，但我仍在努力理解HTML/CSS的逻辑。

基本上，我现在正在尝试编辑基于这个演示，并希望转向"点击我"变成了一个带有"close"的按钮;

我找到了一个类似的演示，但仍然无法将它们合并在一起。我该怎么做，或者有人能给点建议吗?非常感谢!

input {
display: none;
}
label {
margin: 0rem 0rem;
/*spacing between button and divider*/
cursor: pointer;
display: inline-block;
padding: 0.5rem 1rem 0.5rem 0rem;
color: rgba(0, 0, 0, 1);
background: rgba(255, 255, 255, 1);
-webkit-transition: background-color 0.2s, color 0.2s;
width: 100%;
}
label:hover {
color: rgba(0, 0, 0, 0.3);
}
.hiddentext {
-webkit-transition: height .3s ease;
height: 0px;
overflow: hidden;
width: 100%;
background: rgba(255, 255, 0, 1);
}
input:checked+.hiddentext {
height: 800px;
max-height: 85vh;
}
input:checked+.hiddentext {
height: 800px;
max-height: 200px;
}
#check {
position: absolute;
appearance: none;
cursor: pointer;
}
#check+label {
position: absolute;
cursor: pointer;
background: #ff00ff;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition: all 500ms ease;
}
#check+label:after {
content: "Open"
}
#check:checked+label {
background: #00ff00;
}
#check:checked+label:after {
content: "Close"
}

<h2>Title</h2>
<hr>
<div>
<label for="check">More</label>
<hr>
<input name="check" id="check" type="checkbox">
<div class="hiddentext">
Hidden message
</div>
</div>

Answer 1

你需要将<input>进一步向上移动，因为你的CSS正在使用"+"选择器。

你也可以用~代替+。

一个可能的解决方案是这样的:

<h2>Title</h2>
<hr>
<div>
<input name="check" id="check" type="checkbox">
<label for="check"></label>
<hr>
<div class="hiddentext">
Hidden message
</div>
</div>

input {
display: none;
}
label {
margin: 0rem 0rem;
/*spacing between button and divider*/
cursor: pointer;
display: inline-block;
padding: 0.5rem 1rem 0.5rem 0rem;
color: rgba(0, 0, 0, 1);
background: rgba(255, 255, 255, 1);
-webkit-transition: background-color 0.2s, color 0.2s;
width: 100%;
}
label:hover {
color: rgba(0, 0, 0, 0.3);
}
.hiddentext {
-webkit-transition: height .3s ease;
height: 0px;
overflow: hidden;
width: 100%;
background: rgba(255, 255, 0, 1);
margin-top: 10px;
}
input:checked ~ .hiddentext {
height: 800px;
max-height: 200px;
}
#check {
position: absolute;
appearance: none;
cursor: pointer;
}
#check + label {
position: absolute;
cursor: pointer;
background: #ff00ff;
-webkit-font-smoothing: antialiased;
cursor: pointer;
transition: all 500ms ease;
}
#check + label:after {
content: "Open"
}
#check:checked + label {
background: #00ff00;
}
#check:checked+label:after {
content: "Close"
}