我尝试使用单选按钮使用css构建一个手风琴，该按钮在被选中的按钮上具有css冲突，因为未选中的按钮不会折叠回到初始状态。我的CSS有什么问题？
这是我的codepen
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
您只需将单选类型名称编辑为相同的所有名称即可成功工作。 在这里也给您这段代码。
.accordeon {
display: flex;
flex-direction: column;
}
.accordeon .accordeon__item input {
display: none;
}
.accordeon .accordeon__item input:checked ~ .content {
opacity: 1;
font-size: 14px;
transition: font-size 300ms 0ms ease-in, opacity 300ms 300ms ease-in;
}
.accordeon .accordeon__item label {
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
padding: .5em 1em;
cursor: pointer;
}
.accordeon .accordeon__item .content {
font-size: 0;
line-height: 1.25;
padding: 1rem;
opacity: 0;
transition: font-size 300ms 300ms ease-in, opacity 300ms 0ms ease-in;
} <div class="accordeon">
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-1">
<label for="acc-1">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-2">
<label for="acc-2">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-3">
<label for="acc-3">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-4">
<label for="acc-4">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-5">
<label for="acc-5">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-6">
<label for="acc-6">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-7">
<label for="acc-7">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
<div class="accordeon__item">
<input type="radio" name="ss" id="acc-8">
<label for="acc-8">Duis vestibulum nisl id nulla placerat?</label>
<div class="content">
Sed eu accumsan nunc. Nam placerat tristique ante nec consequat. Mauris sit amet lectus in diam vestibulum consequat ac nec elit. Donec vulputate quis ex non tincidunt. Mauris sed ipsum a ligula dapibus vestibulum. Phasellus pulvinar orci vitae pellentesque finibus. Fusce posuere pretium risus, vel sollicitudin nunc vulputate sed. Praesent pretium nisl suscipit magna vestibulum, sed ultrices est mollis.
Duis sit amet lacinia magna, sed semper mi. Fusce mattis commodo arcu nec ornare. Suspendisse nec purus vitae lacus tempor tincidunt a in ex. Curabitur vitae tristique erat. Sed in accumsan sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam malesuada feugiat consequat.
</div>
</div>
</div>
</div>