Question

由于按钮列表很长，因此我试图在代码中创建手风琴按钮。我似乎无法弄清楚如何使代码能够做到这一点。

<p>
	<button data-toggle="collapse" data-target="#acne" class="collapsed unique">Acne</button>
</p>
<div id="acne" class="collapse unique">
	<ul>
		<li>Blackheads</li>
		<li>Whiteheads</li>
		<li>Pimples</li>
		<li>Nodules or cysts</li>
		<li>Redness or flushing</li>
	</ul>
</div>
<p>
	<button data-toggle="collapse" data-target="#backpain" class="collapsed unique">Back Pain</button>
</p>
<div id="backpain" class="collapse unique">
	<ul>
		<li>Pain in the lower back</li>
		<li>Pain, numbness, or tingling on one side of the buttocks or leg</li>
		<li>Weakness of the muscles in one leg</li>
	</ul>
</div>
<p>
	<button data-toggle="collapse" data-target="#utim" class="collapsed unique">Bladder Infection (Male)</button>
</p>
<div id="utim" class="collapse unique">
	<p>
		 Although we're unable to treat bladder infections in men, we can gather information about your symptoms. Then we'll give you a call to schedule an appointment. You won't be charged for this interview.
	</p>
</div>

这是我按钮的CSS

/*Collapsible buttons*/
button.unique.collapsed{
    height:40px;
    border-radius: 25px;
    outline: none;
}
button.unique{
    height: 40px;
    border-radius: 25px;
    outline: none;
}
.unique {
    padding: 0;
  width: 100%;
  font: Lato,sans-serif;
  color: #ffffff;
  background-color: #32BDCC;
  font-size: 20px;
}
.unique:hover {
    color: #32BDCC;
    border-color: #32BDCC;
    background-color: white;
  }
.unique ul{
    background-color: #ffffff;
}

.collapse{
    background-color: #ffffff
}

我非常感谢能提供的任何帮助。

Answer 1

这有点像修改您的代码，但这是我拥有的旧代码，可以满足您的目的。隐藏时，“关于”部分被隐藏；这以“阅读更多”的方式工作。我对按钮做了一些样式设置，但是您可以使用蓝色文本等来调整内容。

我希望这会有所帮助。

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;
}

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
}

article p,
section p,
section ul {
  margin-bottom: 1.3rem;
  text-align: left;
}

section ul {
  list-style-type: disc;
  margin: 0 auto 1.3rem 30px;
}

article {
  margin-top: 2rem;
  position: relative;
  *zoom: 1;
}

article:before,
article:after {
  content: "";
  display: table;
}

article:after {
  clear: both;
}

article section:first-of-type {
  float: right;
  width: 99%;
}

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;
  padding-bottom: .5rem;
}

input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

article label {
  position: absolute;
  bottom: -2rem;
  margin-bottom: 1rem;
  left: 0;
  width: 100%;
  border-radius: 25px;
  background-color: #32BDCC;
  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);
}

input[type=checkbox]:checked~section {
  display: block;
  visibility: visible;
  width: 100%;
}

label:hover {
  background-color: #ffffff;
  border: 2px solid #32BDCC;
}

label span:last-of-type {
  display: none;
  visibility: hidden;
}

input[type=checkbox]:checked~label span:first-of-type {
  display: none;
  visibility: hidden;
}

input[type=checkbox]:checked~label span:last-of-type {
  display: block;
  visibility: visible;
}

<body>
  <article>
    <input type="checkbox" id="read_more1" role="button">
    <label for="read_more1" onclick=""><span>Show</span><span>Hide</span>

        </label>

    <section>
      <p>Acne</p>
    </section>
    <section>
      <ul>
        <li>Blackheads</li>
        <li>Whiteheads</li>
        <li>Pimples</li>
        <li>Nodules or cysts</li>
        <li>Redness or flushing</li>
      </ul>
    </section>
  </article>
  <article>
    <input type="checkbox" id="read_more2" role="button">
    <label for="read_more2" onclick=""><span>Show</span><span>Hide</span>

        </label>

    <section>
      <p>Back Pain</p>
    </section>
    <section>
      <ul>
        <li>Pain in the lower back</li>
        <li>Pain, numbness, or tingling on one side of the buttocks or leg</li>
        <li>Weakness of the muscles in one leg</li>
      </ul>
    </section>
  </article>
  <article>
    <input type="checkbox" id="read_more3" role="button">
    <label for="read_more3" onclick=""><span>Show</span><span>Hide</span>

        </label>

    <section>
      <p>Bladder Infections</p>
    </section>
    <section>
      <p>
        Although we're unable to treat bladder infections in men, we can gather information about your symptoms. Then we'll give you a call to schedule an appointment. You won't be charged for this interview.
      </p>

    </section>
  </article>
</body>

如何使按钮更像手风琴按钮？

1 个答案: