html - HTML/CSS 单选按钮多级手风琴在选择时自动关闭
问题描述
我从多个 codepen 源中获取了一些示例，以使用类型单选按钮仅使用 HTML/CSS 创建多级手风琴。当您单击“主”单选按钮时，它会打开，如果您单击另一个“主”单选按钮，它将关闭前一个单选按钮，但是如果您打开“主”单选按钮，然后单击收音机内的单选按钮按钮它没有打开它会关闭“主”单选按钮，请参见此处的示例。
<!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>
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;
}
解决方案
您可以使用复选框，因为当一个被选中时，另一个将取消选中。使用收音机，您可以通过使用 name 属性来做到这一点。如果收音机应该具有切换关系，它们应该具有相同的名称，如下面的示例所示：
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;
}<!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>推荐阅读
- node.js - Quickdb add 不是 Quick.db 的函数错误
- java - 如何以编程方式在 Android Studio 中以编程方式更改 NavigationView 的图标颜色
- c++ - MulVAL 中的错误：“mylval”的多重定义；collect2：错误：ld 返回 1 个退出状态
- java - 调用方法来编辑 java 中另一个类的字符串时遇到问题
- javascript - JQuery.getJSON().done() 函数何时被准确调用？
- c++ - std::transform 不适用于静态分配的字符串
- r - 将函数传递给基于 R 正则表达式的工具
- javascript - 对话框打开时如何显示信息文本
- python - Plotly：饼图只显示图例
- javascript - 使用 JSON 数组从用户那里找到最佳时间