**关闭。**此题需要debugging details。目前不接受答复。
编辑问题以包含desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
昨天关门了。
Improve this question
我已经写了一个侧边栏代码在css和添加一些收尾与JS的帮助下一些教程，因为。最后，侧边栏不起作用。我看了浏览器开发工具，它说这样的话：未捕获的类型错误：document.querySelector（...）为null。它应该是滑进n出，因为我点击，但它毕竟没有互动。
JS Code:
document.querySelector(".sidebar .toggle-btn").addEventListener("click", function(){
document.querySelector(".sidebar").classList.toggle("active");
});CSS Code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.sidebar {
position: fixed;
top: 0px;
left:-250px;
height: 100%;
width: 250px;
background:#111;
transition: all 300ms ease-in-out
}
.sidebar .toggle-btn {
position:absolute;
top: 10px;
right: -40px;
width: 30px;
height: 30px;
cursor: pointer;
}
.sidebar .toggle-btn span {
position: absolute;
width: 100%;
height: 2px;
background: #111;
transform: translateY(-50%);
transition: all 300ms ease-in-out
}
.sidebar .toggle-btn span:nth-child(1) {
top: 10%
}
.sidebar .toggle-btn span:nth-child(2) {
top: 50%
}
.sidebar .toggle-btn span:nth-child(3) {
top: 90%
}
.sidebar .links a {
display: block;
padding: 15px 10px;
text-decoration: none;
color:#f5f5f5;
cursor: pointer;
border-bottom: 1px solid #1b1b1b;
}
.sidebar .links a.active,
.sidebar .links a:hover {
background: #222;
color: #00acee;
}
.sidebar .links a i {
display:inline-block;
margin-right: 10px;
}
.sidebar .active {
left: 0px;
}
.sidebar .active .toggle-btn span:nth-child(1) {
top: 50%;
transform: translateY(50%) rotate(45deg);
}
.sidebar .active .toggle-btn span:nth-child(2) {
display: none;
}
.sidebar .active .toggle-btn span:nth-child(3) {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}我已经看了10分钟的两个代码，我不知道如何使它工作。
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<!--LINKS-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="JSidebar.js"></script>
</head>
<!--SIDEBAR-->
<body>
<div class="sidebar active">
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="links">
<h1 style="color: crimson">D&D Guide</h1>
<li><a href="Experience.html"><i class="fas fa-chart-line"></i> Experience</a></li>
<li><a href="Races.html"><i class="fas fa-user"></i> Races</a></li>
<li><a href="Classes.html"><i class="fas fa-users"></i> Classes</a></li>
<li><a href="Personality.html"><i class="fas fa-bible"></i> Personality</a></li>
<li><a href="Equipment.html"><i class="fas fa-shield-alt"></i> Equipment</a></li>
<li><a href="Feats.html"><i class="fas fa-medal"></i> Feats</a></li>
<li><a href="Skills.html"><i class="fas fa-cogs"></i> Skills</a></li>
<li><a href="Adventuring.html"><i class="fas fa-hiking"></i> Adventuring</a></li>
<li><a href="Combat.html"><i class="fas fa-fist-raised"></i> Combat</a></li>
<li><a href="Spells.html"><i class="fas fa-magic"></i> Spells</a></li>
</div>
</div>
</body>
</html>现在侧边栏总是可见的，隐藏它的按钮不起作用。
1条答案
按热度按时间xdyibdwo1#
如果没有HTML，这有点难以理解，但我认为你的问题来自这样一个事实，即在你的CSS中，你正在样式化
.sidebar .active而不是.sidebar.active（之间没有空格），第一个选择一个元素，类.active驻留在.sidebar中，而后者选择一个元素，两个类sidebar和active这里