文章/答案/技术大牛

发布

社区首页 >问答首页 >css accordion与选中的单选按钮冲突

问css accordion与选中的单选按钮冲突
EN

Stack Overflow用户

提问于 2018-12-28 20:53:48

回答 1查看 27关注 0票数 0

我尝试使用单选按钮构建一个带有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>

accordion

css

radio-button

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-28 21:01:46

您只需将无线类型名称空白编辑为相同的所有名称，即可成功工作。让你在这里也看到这段代码..

.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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53958923

复制

相似问题

问css accordion与选中的单选按钮冲突
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css accordion与选中的单选按钮冲突EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css accordion与选中的单选按钮冲突
EN