我正在尝试在我的代码中创建手风琴按钮，因为我有一长串按钮。我似乎无法弄清楚如何让代码工作来做到这一点。
<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
}
我真的很感激可以提供任何帮助。
这有点像你的代码，但它是我可能为你的目的服务的旧代码。在隐藏中，“关于”部分被隐藏;这是一种“阅读更多”的方式。我在某种程度上塑造了按钮，但你可以用蓝色文本等重新设置内容。
我希望这有帮助。
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>