Question

我基本上希望能够通过单击按钮来显示和隐藏HTML部分。

这有点难以解释，但我有一个小提琴，所以表明我的意思。目前我只能制作一个，我需要能够创建多个。代码是使用内联css完成的，因为我无法访问要使用它的样式表。

<!DOCTYPE html>

Answer 1

不确定这是否是您正在寻找的内容，但这是一段用于显示/隐藏文字的便捷代码

＆＃13;

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

＆＃13;

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

＆＃13;

显示和隐藏HTML部分

1 个答案: