我基本上希望能够通过单击按钮来显示和隐藏 HTML 部分。
这有点难以解释，但我有一个 fiddle ，所以请说明我的意思。就目前而言，我只能制作一个，而且我需要能够制作多个。代码是使用内联 css 完成的，因为我无权访问要使用它的样式表。
https://jsfiddle.net/edbaz1qd/
<!DOCTYPE html>
最佳答案
不确定这是否是您要查找的内容，但这是我用来显示/隐藏文本的一段方便的代码
html {
background: white
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
figure {
margin: 0 0 1.3rem 0;
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
figure img {
max-width: 100%;
height: auto;
}
body {
max-width: 480px;
width: 90%;
margin: 3em auto;
font-size: 75%;
line-height: 1.3rem;
font-family: sans-serif;
position: relative;
*zoom: 1;
}
body:before,
body:after {
content: "";
display: table;
}
body:after {
clear: both
}
p {
margin-bottom: 1.3rem
}
article {
margin-bottom: 3rem;
position: relative;
*zoom: 1;
}
article:before,
article:after {
content: "";
display: table;
}
article:after {
clear: both
}
article figure {
float: left;
width: 32.5%;
}
article section:first-of-type {
float: right;
width: 62.5%;
}
article section:last-of-type {
display: none;
visibility: hidden;
}
section {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="read_more"] {
position: absolute;
bottom: -3rem;
left: 0;
width: 100%;
text-align: center;
padding: .65rem;
box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}
[for="read_more"]:hover {
background: rgba(0, 0, 0, .5);
color: rgb(255, 255, 255);
}
[for="read_more"] span:last-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ section {
display: block;
visibility: visible;
width: 100%;
}
input[type=checkbox]:checked ~ figure {
width: 100%
}
input[type=checkbox]:checked ~ [for="read_more"] span:first-of-type {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ [for="read_more"] span:last-of-type {
display: block;
visibility: visible;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Show/hide</title>
</head>
<body>
<article>
<input type="checkbox" id="read_more" role="button">
<label for="read_more" onclick=""><span>Show</span><span>Hide</span>
</label>
<figure>
<img src="http://www.musicmatters.ie/images/bara2.jpg" alt="Picture" />
</figure>
<section>
<p>Short Intro goes here. Write whatever you like.</p>
</section>
<section>
<p>Full article goes here. We'll make do with lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum
elementum quam et interdum. Integer vitae augue vitae nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit
massa vitae ullamcorper fermentum. Nam rutrum odio dui, vitae tempus dui maximus sed.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu orci elit. Pellentesque vel risus tortor. Pellentesque ut diam mi. Nunc iaculis ante ac tempus scelerisque. Etiam vestibulum elementum quam et interdum. Integer vitae augue vitae
nunc pulvinar scelerisque eu vitae justo. Mauris urna erat, ornare ut eros non, varius bibendum mauris. Vivamus dolor felis, tincidunt sed malesuada vel, ornare non ligula. Curabitur blandit massa vitae ullamcorper fermentum. Nam rutrum odio dui,
vitae tempus dui maximus sed.</p>
</section>
</article>
</body>
</html>关于html - 显示和隐藏 HTML 部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31762839/