当前结果 我的每个标签仅控制第一个框，而不是控制它们所在的框。
期望的结果 让每个按钮只触发同一个div中的内容，而不是控制第一个div中的内容。
我也不想拥有一堆不同的 id，那么有没有更简单的方法可以使用 javascript 来实现此目的？
问题 那么如何让第一个按钮只控制它所在的框，而第二个按钮也只控制它所在的框呢？
body {
background: #CCC;
font-family: 'Varela Round', sans-serif;
}
#collapse {
color: #fff;
background: #494949;
border-radius: 10px;
width: 300px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
width: 90px;
margin: 0 auto;
margin-bottom: 5px;
display: block;
text-align: center;
color: #fff;
background-color: #4ada95;
border-radius: 5px;
}
label:hover {
color: #494949;
}
label::before {}
#expand {
height: 225px;
overflow: hidden;
transition: height 0.5s;
background-color: #4ada95;
color: #FFF;
width: 250px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
li {
list-style-type: none;
padding: 10px;
margin: 0 auto;
}
section {
padding: 0 20px;
}
#toggle:checked~#expand {
height: 0px;
}
#toggle:checked~label::before {
display: hidden;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="collapse.css" rel="stylesheet">
</head>
<body>
<main>
<div id="collapse">
<h2>Icon Quiz</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">take quiz</label>
<div id="expand">
<section>
<h3>which icon is used for GitHub?</h3>
<li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
<li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
</section>
</div>
</div>
<div id="collapse">
<h2>Another Quiz</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">take quiz</label>
<div id="expand">
<section>
<h3>test?</h3>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</section>
</div>
</div>
</main>
</body>
</html>最佳答案
您需要拥有唯一的 ID。 ID 只能使用一次。
body {
background: #CCC;
font-family: 'Varela Round', sans-serif;
}
#collapse {
color: #fff;
background: #494949;
border-radius: 10px;
width: 300px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
width: 90px;
margin: 0 auto;
margin-bottom: 5px;
display: block;
text-align: center;
color: #fff;
background-color: #4ada95;
border-radius: 5px;
}
label:hover {
color: #494949;
}
label::before {}
#expand,
#expand2{
height: 225px;
overflow: hidden;
transition: height 0.5s;
background-color: #4ada95;
color: #FFF;
width: 250px;
margin: 0 auto;
text-align: center;
border-radius: 10px;
}
li {
list-style-type: none;
padding: 10px;
margin: 0 auto;
}
section {
padding: 0 20px;
}
#toggle:checked~#expand {
height: 0px;
}
#toggle:checked~label::before {
display: hidden;
}
#toggle2:checked~#expand2 {
height: 0px;
}
#toggle2:checked~label::before {
display: hidden;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="collapse.css" rel="stylesheet">
</head>
<body>
<main>
<div id="collapse">
<h2>Icon Quiz</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">take quiz</label>
<div id="expand">
<section>
<h3>which icon is used for GitHub?</h3>
<li><i class="fa fa-gitlab" aria-hidden="true"></i></li>
<li><i class="fa fa-grav fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-github-alt fa-lg" aria-hidden="true"></i></li>
</section>
</div>
</div>
<div id="collapse">
<h2>Another Quiz</h2>
<input id="toggle2" type="checkbox" checked>
<label for="toggle2">take quiz</label>
<div id="expand2">
<section>
<h3>test?</h3>
<li>blah</li>
<li>blah</li>
<li>blah</li>
</section>
</div>
</div>
</main>
</body>
</html>关于javascript - 如何切换不同的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46003640/