css 手风琴与单选按钮在选中时发生冲突
css accordion with radio buttons conflicts on checked
我尝试使用单选按钮构建一个带有 css 的手风琴，它在选中的按钮上有 css 冲突，因为选中的 none 不会折叠回初始状态。我的 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>
您只需将无线电类型名称空白编辑为相同的所有名称即可成功工作。
在这里也让你这个代码..
.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>
我尝试使用单选按钮构建一个带有 css 的手风琴，它在选中的按钮上有 css 冲突，因为选中的 none 不会折叠回初始状态。我的 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>
您只需将无线电类型名称空白编辑为相同的所有名称即可成功工作。 在这里也让你这个代码..
.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>