文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >HTML/CSS单选按钮多级折叠按钮在选定时自动关闭

问HTML/CSS单选按钮多级折叠按钮在选定时自动关闭
EN

Stack Overflow用户
提问于 2020-03-07 18:09:20
回答 1查看 463关注 0票数 0

我从多个代码来源获取了几个示例，使用类型单选按钮创建了一个具有HTML/CSS的多级accordion。当你点击'main‘单选按钮时，它会打开，如果你点击另一个'main’单选按钮，它会关闭上一个单选按钮。但是，如果你打开'main‘单选按钮，然后单击单选按钮里面的单选按钮，它不会打开，它会关闭'main’单选按钮，参见示例here。

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Settings</title>
        <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div id="accordion">
            <div class="accordion-tab">
                <input type="radio" id="radio-1" class="accordion-input" name="accordion">
                <label class="accordion-label" for="radio-1"></label>
                <div class="accordion-content">
                    <div class="accordion-info">
                        <div class="platform-image"></div>
                        <span class="platform-name">Lorem ipsum</span>
                    </div>
                    <div class="total-games">
                        <span>Lorem ipsum</span>
                    </div>
                </div>

                <div class="accordion-tab-content">
                    <div class="wrapper">
                        <div class="accordion-tab">
                            <input type="radio" id="radio-2" class="accordion-input" name="accordion">
                            <label class="accordion-label" for="radio-2"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="accordion-tab">
                <input type="radio" id="radio-3" class="accordion-input" name="accordion">
                <label class="accordion-label" for="radio-3"></label>
                <div class="accordion-content">
                    <div class="accordion-info">
                        <div class="platform-image"></div>
                        <span class="platform-name">Lorem ipsum</span>
                    </div>
                    <div class="total-games">
                        <span>Lorem ipsum</span>
                    </div>
                </div>

                <div class="accordion-tab-content">
                    <div class="wrapper">
                        <div class="accordion-tab">
                            <input type="radio" id="radio-4" class="accordion-input" name="accordion">
                            <label class="accordion-label" for="radio-4"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
代码语言：javascript
复制
body {
    background-color: #6fcae7;
    overflow-y: scroll;
    overflow-x: hidden;
}

#accordion {
    margin: 50px 0 0;
    font-family: "Poppins", sans-serif;
}

.accordion-tab {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 10px; /* 10px adds to bottom */
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #ececec;
}
.accordion-tab:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11);
}

.accordion-input {
    display: none;
}

.accordion-input:checked ~ .accordion-content + .accordion-tab-content {
    max-height: 3000px;
}

.accordion-input:checked ~ .accordion-content:after {
    transform: rotate(0);
}

.accordion-label {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 80px;
    z-index: 1;
    cursor: pointer;
}

.accordion-content {
    position: relative;
    height: 80px;
    padding: 0 87px 0 30px;
    white-space: nowrap;
}

.accordion-content:before, .accordion-content:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
}

.accordion-content:before {
    height: 100%;
}

.accordion-label:hover ~ .accordion-content:after {
  background-image: url("accordion-arrow-hover.svg");
}

.accordion-content:after {
    width: 24px;
    height: 100%;
    background-image: url("accordion-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
}

.accordion-content + .accordion-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s;
}

.accordion-content > div, .total-games > div {
    display: inline-block;
    vertical-align: middle;
}

.accordion-info {
    width: 95%;
}

.accordion-tab-content {
    background-color: #f9f9f9;
    color: #363636;
    font-size: 13px;
    font-weight: 400;
    border-radius: 0 0 4px 4px;
}

.wrapper {
  padding: 30px;
}

.platform-image {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: #e4e4e4;
    vertical-align: middle;
}

.platform-name {
    font-size: 14px;
    color: #242a32;
    width: 75%;
    margin-left: 16px;
    font-weight: 500;
    color: #242a32;
    vertical-align: middle;
}

.total-games {
    font-size: 14px;
    color: #5d5d5d;
}

.game-image {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: #e4e4e4;
    vertical-align: middle;
}

.game-name {
    font-size: 14px;
    color: #242a32;
    width: 75%;
    margin-left: 16px;
    font-weight: 500;
    color: #242a32;
    vertical-align: middle;
}
css
html
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-07 19:04:23

您可以使用复选框，因为当其中一个被选中时，另一个将被取消选中。使用radio的，您可以使用name属性来完成此操作。如果无线电应该有切换关系，它们应该具有相同的名称，如下面的示例所示：

​

代码语言：javascript
复制
body {
    background-color: #6fcae7;
    overflow-y: scroll;
    overflow-x: hidden;
}

#accordion {
    margin: 50px 0 0;
    font-family: "Poppins", sans-serif;
}

.accordion-tab {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 10px; /* 10px adds to bottom */
    border-radius: 4px;
    background-color: #ffffff;
    box-shadow: 0 0 0 1px #ececec;
}
.accordion-tab:hover {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11);
}

.accordion-input {
    display: none;
}

.accordion-input:checked ~ .accordion-content + .accordion-tab-content {
    max-height: 3000px;
}

.accordion-input:checked ~ .accordion-content:after {
    transform: rotate(0);
}

.accordion-label {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 80px;
    z-index: 1;
    cursor: pointer;
}

.accordion-content {
    position: relative;
    height: 80px;
    padding: 0 87px 0 30px;
    white-space: nowrap;
}

.accordion-content:before, .accordion-content:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
}

.accordion-content:before {
    height: 100%;
}

.accordion-label:hover ~ .accordion-content:after {
  background-image: url("accordion-arrow-hover.svg");
}

.accordion-content:after {
    width: 24px;
    height: 100%;
    background-image: url("accordion-arrow.svg");
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
}

.accordion-content + .accordion-tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s;
}

.accordion-content > div, .total-games > div {
    display: inline-block;
    vertical-align: middle;
}

.accordion-info {
    width: 95%;
}

.accordion-tab-content {
    background-color: #f9f9f9;
    color: #363636;
    font-size: 13px;
    font-weight: 400;
    border-radius: 0 0 4px 4px;
}

.wrapper {
  padding: 30px;
}

.platform-image {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: #e4e4e4;
    vertical-align: middle;
}

.platform-name {
    font-size: 14px;
    color: #242a32;
    width: 75%;
    margin-left: 16px;
    font-weight: 500;
    color: #242a32;
    vertical-align: middle;
}

.total-games {
    font-size: 14px;
    color: #5d5d5d;
}

.game-image {
    display: inline-block;
    height: 44px;
    width: 44px;
    border-radius: 50%;
    background-color: #e4e4e4;
    vertical-align: middle;
}

.game-name {
    font-size: 14px;
    color: #242a32;
    width: 75%;
    margin-left: 16px;
    font-weight: 500;
    color: #242a32;
    vertical-align: middle;
}
代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Settings</title>
        <link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700" rel="stylesheet">
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
        <div id="accordion">
            <div class="accordion-tab">
                <input type="radio" id="radio-1" class="accordion-input" name="accordion">
                <label class="accordion-label" for="radio-1"></label>
                <div class="accordion-content">
                    <div class="accordion-info">
                        <div class="platform-image"></div>
                        <span class="platform-name">Lorem ipsum</span>
                    </div>
                    <div class="total-games">
                        <span>Lorem ipsum</span>
                    </div>
                </div>

                <div class="accordion-tab-content">
                    <div class="wrapper">
                        <div class="accordion-tab">
                            <input type="radio" id="radio-2" class="accordion-input" name="sub-accordion-1">
                            <label class="accordion-label" for="radio-2"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="accordion-tab">
                <input type="radio" id="radio-3" class="accordion-input" name="accordion">
                <label class="accordion-label" for="radio-3"></label>
                <div class="accordion-content">
                    <div class="accordion-info">
                        <div class="platform-image"></div>
                        <span class="platform-name">Lorem ipsum</span>
                    </div>
                    <div class="total-games">
                        <span>Lorem ipsum</span>
                    </div>
                </div>

                <div class="accordion-tab-content">
                    <div class="wrapper">
                        <div class="accordion-tab">
                            <input type="radio" id="radio-4" class="accordion-input" name="sub-accordion-2">
                            <label class="accordion-label" for="radio-4"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                      <div class="accordion-tab">
                            <input type="radio" id="radio-5" class="accordion-input" name="sub-accordion-2">
                            <label class="accordion-label" for="radio-5"></label>
                            <div class="accordion-content">
                                <div class="accordion-info">
                                    <div class="game-image"></div>
                                    <span class="game-name">Lorem ipsum</span>
                                </div>
                                <div class="total-games">
                                    <span>Lorem ipsum</span>
                                </div>
                            </div>
                            <div class="accordion-tab-content">
                                <div class="wrapper">
                                    <div>
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id congue dolor. Vivamus eleifend vitae nunc sed tincidunt.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

​

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

https://stackoverflow.com/questions/60576444

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档