复选框在单击时不起作用，我如何修复此问题

Question

我正在尝试构建一个响应导航栏，不幸的是，复选框不起作用。我一直在关注一个导航栏的youtube视频。这是我的HTML代码：

body {
margin: 0;
padding: 0;
}
nav {
display: flex;
background-color: #457b9d;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav ul {
list-style: none;
display: flex;
margin: 0;
transition: font-size 0.5s ease-out;
font-size: 20px;
}
nav ul li {
margin: 10px;
color: white;
}
nav h2 {
color: white;
}
.fa {
padding: 5px;
font-size: 10px;
width: 15px;
text-align: center;
text-decoration: none;
margin: 5px 10px;
border-radius: 50px;
}
.fa-facebook {
background: white;
color: #3B5998;
}
.fa-instagram {
background: white;
color: #125688;
}
#social {
display: flex;
flex-direction: row;
align-items: center;
}
nav .menu-btn i {
color: white;
font-size: 22px;
margin: 0px 10px;
cursor: pointer;
display: none;
}
#click {
display: none;
}
@media (max-width:940px) {
nav .menu-btn i {
display: block;
}
#click:checked~nav .menu-btn i::before {
content: "f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background-color: #457b9d;
height: 100vh;
width: 100%;
display: block;
text-align: center;
font-size: 30px;
padding: 0;
}
#check:checked~ul {
left: 0%;
}
nav ul li {
margin: 40px 0;
}
}

<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<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">
<nav>
<h2>TRT</h2>

<ul>
<li>About Us</li>
<li>Products</li>
<li>Facilities</li>
<li>Contact Us</li>
</ul>
<div id="social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>

</div>
</nav>

我不知道如何修复它，因为我对网络开发很陌生。我确实找到了一些解决方案，但都不起作用。请帮忙。

Answer 1

您可以开始在nav外部选中复选框，并将其插入nav之前，这样您的CSS选择器就很高效了。则将CCD_ 1更新为CCD_。

示例：

body {
margin: 0;
padding: 0;
}
nav {
display: flex;
background-color: #457b9d;
justify-content: space-between;
align-items: center;
padding: 10px;
}
nav ul {
list-style: none;
display: flex;
margin: 0;
transition: font-size 0.5s ease-out;
font-size: 20px;
}
nav ul li {
margin: 10px;
color: white;
}
nav h2 {
color: white;
}
.fa {
padding: 5px;
font-size: 10px;
width: 15px;
text-align: center;
text-decoration: none;
margin: 5px 10px;
border-radius: 50px;
}
.fa-facebook {
background: white;
color: #3B5998;
}
.fa-instagram {
background: white;
color: #125688;
}
#social {
display: flex;
flex-direction: row;
align-items: center;
}
nav .menu-btn i {
color: white;
font-size: 22px;
margin: 0px 10px;
cursor: pointer;
display: none;
}
#click {
display: none;
}
@media (max-width:940px) {
nav .menu-btn i {
display: block;
}
#click:checked~nav .menu-btn i::before {
content: "f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background-color: #457b9d;
height: 100vh;
width: 100%;
display: block;
text-align: center;
font-size: 30px;
padding: 0;
}
#click:checked~nav ul {
left: 0%;
}
nav ul li {
margin: 40px 0;
}
}

<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<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">
<input type="checkbox" id="click">
<nav>
<h2>TRT</h2>

<ul>
<li>About Us</li>
<li>Products</li>
<li>Facilities</li>
<li>Contact Us</li>
</ul>
<div id="social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-instagram"></a>
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>

</div>
</nav>