JavaScript/jQuery多级手风琴赢得'；不要关闭复选框
当我单击其中一个“主”复选框时，它会打开，但当我单击另一个“主”复选框时，它不会关闭上一个复选框。此外，如果我打开其中一个“主”复选框，然后单击其中的复选框，它不会展开该复选框，而是关闭“主”复选框，然后在不重新加载页面的情况下，所有复选框都不会打开，请参见示例JavaScript/jQuery多级手风琴赢得'；不要关闭复选框,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当我单击其中一个“主”复选框时，它会打开，但当我单击另一个“主”复选框时，它不会关闭上一个复选框。此外，如果我打开其中一个“主”复选框，然后单击其中的复选框，它不会展开该复选框，而是关闭“主”复选框，然后在不重新加载页面的情况下，所有复选框都不会打开，请参见示例 将类型属性复选框更改为收音机 $（“.手风琴选项卡内容”）。单击（函数（e）{ e、 预防默认值（）； var$this=$（this）； if（$this.next（）.hasClass（'show'））{ $this.next（）
将
类型复选框收音机$（“.手风琴选项卡内容”）。单击（函数（e）{
e、 预防默认值（）；
var$this=$（this）；
if（$this.next（）.hasClass（'show'））{
$this.next（）.removeClass（'show'）；
$this.next（）.slideUp（350）；
}否则{
$this.parent（）.parent（）.find（'.accordion选项卡'）.removeClass（'show'）；
$this.parent（）.parent（）.find（'.accordion选项卡内容'）.slideUp（350）；
$this.next（）.toggleClass（'show'）；
$this.next（）.slideToggle（350）；
}
});
正文{
背景色：#6fcae7；
溢出y：滚动；
溢出x：隐藏；
}
#手风琴{
利润率：50px0；
字体系列：“罂粟花”，无衬线；
}
.手风琴标签{
位置：相对位置；
宽度：100%；
最大宽度：1000px；
边距：0自动10px；/*10px添加到底部*/
边界半径：4px；
背景色：#ffffff；
盒影：0 1px#ececec；
}
.手风琴选项卡：悬停{
盒影：0 4px10px 0 rgba（0,0,0,0.11）；
}
.手风琴输入{
显示：无；
}
.手风琴输入：选中~.手风琴内容+.手风琴选项卡内容{
最大高度：3000px；
}
.手风琴输入：选中~.手风琴内容：后{
变换：旋转（0）；
}
.手风琴标签{
位置：绝对位置；
宽度：100%；
身高：100%；
最大高度：80px；
z指数：1；
光标：指针；
}
·手风琴内容{
位置：相对位置；
高度：80px；
填充：0 87px 0 30px；
空白：nowrap；
}
.手风琴内容：之前，.手风琴内容：之后{
内容：''；
显示：内联块；
垂直对齐：中间对齐；
}
.手风琴内容：前{
身高：100%；
}
.手风琴标签：悬停~.手风琴内容：后{
背景图片：url（“accordioarrow hover.svg”）；
}
.手风琴内容：后{
宽度：24px；
身高：100%；
背景图片：url（“accordio arrow.svg”）；
背景重复：无重复；
背景位置：中心；
变换：旋转（180度）；
}
.手风琴内容+.手风琴选项卡内容{
最大高度：0；
溢出：隐藏；
过渡：最大高度。3s；
}
.手风琴内容>分区，.游戏总数>分区{
显示：内联块；
垂直对齐：中间对齐；
}
.手风琴信息{
宽度：95%；
}
.手风琴标签内容{
背景色：#f9f9f9；
颜色：#363636；
字体大小：13px；
字体大小：400；
边界半径：0 0 4px 4px；
}
.包装纸{
填充：50px；
}
.平台形象{
显示：内联块；
高度：44px；
宽度：44px；
边界半径：50%；
背景色：#e4；
垂直对齐：中间对齐；
}
.平台名称{
字体大小：14px；
颜色：#242a32；
宽度：75%；
左边距：16像素；
字号：500；
颜色：#242a32；
垂直对齐：中间对齐；
}
.全场比赛{
字体大小：14px；
颜色：#5d5d5d；
}
.游戏形象{
显示：内联块；
高度：44px；
宽度：44px；
边界半径：50%；
背景色：#e4；
垂直对齐：中间对齐；
}
.游戏名称{
字体大小：14px；
颜色：#242a32；
宽度：75%；
左边距：16像素；
字号：500；
颜色：#242a32；
垂直对齐：中间对齐；
}
.游戏元数据{
字体大小：14px；
颜色：#5d5d5d；
}
设置
乱数假文
乱数假文
乱数假文
乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是康格·多洛。万岁，万岁。
乱数假文
乱数假文
乱数假文
乱数假文
Lorem ipsum dolor sit amet，是一位杰出的献身者。我是康格·多洛。万岁，万岁。
<!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="checkbox" id="checkbox-1" class="accordion-input" name="accordion">
<label class="accordion-label" for="checkbox-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="checkbox" id="checkbox-2" class="accordion-input" name="sub-accordion">
<label class="accordion-label" for="checkbox-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="checkbox" id="checkbox-3" class="accordion-input" name="accordion">
<label class="accordion-label" for="checkbox-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="checkbox" id="checkbox-4" class="accordion-input" name="sub-accordion">
<label class="accordion-label" for="checkbox-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="checkbox" id="checkbox-5" class="accordion-input" name="sub-accordion">
<label class="accordion-label" for="checkbox-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>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="./script.js"></script>
</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: 50px;
}
.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;
}
.game-metadata {
font-size: 14px;
color: #5d5d5d;
}
$(".accordion-content").click(function(e) {
$this
.parent()
.parent()
.find(".accordion-content")
.removeClass("show");
$this
.parent()
.parent()
.find(".accordion-tab-content")
.slideUp(350);
$this.next().toggleClass("show");
});
$("[name='accordion']").on("click", function() {
$("[name='accordion']")
.not($(this))
.prop("checked", false);
$(this).prop("checked", $(this).prop("checked"));
if (!$(this).prop("checked"))
$(this)
.siblings(".accordion-tab-content")
.find("input")
.prop("checked", false);
});
$("[name='sub-accordion']").on("click", function() {
$("[name='sub-accordion']")
.not($(this))
.prop("checked", false);
$(this).prop("checked", $(this).prop("checked"));
if (!$(this).prop("checked"))
$(this)
.siblings(".accordion-tab-content")
.find("input")
.prop("checked", false);
});