Question

我有一个纯CSS CSS展开/折叠div基于其他人的代码@ Raspberry Pi Stack Exchange community默认情况下隐藏文本是可折叠的，但如果文本在点击后展开则会更好。

任何人都有关于如何编辑此代码的建议，以便在点击最小化之前将文本最小化？如果避免使用javascript并且Wordpress可以兼容，那会更好。

    <main>
  <h2>CSS Expand/Collapse Section</h2>
  <input id="toggle" type="checkbox" checked>
  <label for="toggle">Hidden Kitten</label>
  <div id="expand">
    <section>
      <p>mew</p>
    </section>
  </div>
  <section>
    <h3>Other content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
    </p>
    <p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
  </section>
</main>

CSS

       @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family: "Open Sans", Arial;
  background: #CCC;
}
main {
  background: #EEE;
  width: 600px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h2 {
  text-align: center;
}
p {
  font-size: 13px;
}
input {
  display: none;
  visibility: hidden;
}
label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}
label:hover {
  color: #000;
}
label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background: url(http://placekitten.com/g/600/300);
  color: #FFF;
}
section {
  padding: 0 20px;
}
#toggle:checked ~ #expand {
  height: 250px;
}
#toggle:checked ~ label::before {
  content: "-";
}

Answer 1

我认为您希望图片开始崩溃。

您只需从输入复选框中删除<input id="toggle" type="checkbox">属性即可实现此目的。

变化：

body {
  font-family: "Open Sans", Arial;
  background: #CCC;
}

main {
  background: #EEE;
  width: 600px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

h2 {
  text-align: center;
}

p {
  font-size: 13px;
}

input {
  display: none;
  visibility: hidden;
}

label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}

label:hover {
  color: #000;
}

label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}

#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background: url(http://placekitten.com/g/600/300);
  color: #FFF;
}

section {
  padding: 0 20px;
}

#toggle:checked~#expand {
  height: 250px;
}

#toggle:checked~label::before {
  content: "-";
}

要：

<main>
  <h2>CSS Expand/Collapse Section</h2>
  <input id="toggle" type="checkbox">
  <label for="toggle">Hidden Kitten</label>
  <div id="expand">
    <section>
      <p>mew</p>
    </section>
  </div>
  <section>
    <h3>Other content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit
      vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
    </p>
    <p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate
      sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
  </section>
</main>

以下是可运行代码段中的代码：

＆＃13;

<div class="sidepullup" id="idSidePullup">
            <iron-icon class="cross" on-click="pullupClose" icon="close"></iron-icon>
            <iron-form id="idForm">
                <form action="/">
                    <paper-input type"text" label="First Name"></paper-input>
                    <paper-input type="text" label="Last Name"></paper-input>
                    <paper-input type="text" label="Title"></paper-input>
                    <paper-input type="text" label="About"></paper-input>
                    <paper-button style="background-color: #03a9f4; color: white" raised onclick="onFormSubmit()">Submit Changes</paper-button>
                </form>
            </iron-form>
         </div>

＆＃13;

<script>
        class IronListClass extends Polymer.Element {
            static get is() {return 'iron-comp'}
        ready() {
                super.ready();
                var that = this;
            }
            pullupClose() {
                var element = $("#idSidePullup");
                console.log('console log of $("#idSidePullup") = ', element);
                $("#idSidePullup").addClass('hidePullup');
                $("#idSidePullup").css("display", "none");
            }
window.customElements.define(IronListClass.is, IronListClass);
    </script>

＆＃13;

Answer 2

只需删除checked中的input，即可开始使用。

它应该是这样的：

<input id="toggle" type="checkbox">

CSS崩溃/扩展

2 个答案: