为什么我的CSS可见性变化不工作，当我切换类与JavaScript?

Question

开始练习一些HTML, CSS, JavaScript。我做了一个简单的导航栏，想做一个下拉面板，如果点击"Beallitasok(设置)"。我在js中做了一个切换，看到它像我想要的那样在html中添加了一个新类。如果我的html类和css选择器等于它应该使我的类从不可见到可见，据我所知。我不知道为什么它不工作

let button = document.querySelector('.button');
let linkBox = document.querySelector('.link-box');
button.addEventListener('click', () => {
linkBox.classList.toggle('active');
})

* {
margin: 0;
padding: 0;
}
.navbar {
height: 10vh;
background-color: black;
display: flex;
align-items: center;
}
.logo a {
text-decoration: none;
color: white;
font-size: 26px;
}
.logo {
padding-left: 7vh;
}
.nav-options-box {
margin-left: auto;
}
.nav-options-box ul {
display: flex;
list-style: none;
}
.nav-option a {
margin: 0 3vh;
color: white;
text-decoration: none;
}
.dropdown {
position: relative;
}
.link-box ul {
top: calc(100% + 2rem);
left: -3.6vh;
width: 200px;
height: 200px;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: space-evenly;
position: absolute;
text-align: center;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.link-box {
visibility: hidden;
}
.link-box ul a {
color: black;
}
.visibility.active {
visibility: visible;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
<nav class="navbar">
<div class="logo"><a href="#">LOGO</a></div>
<div class="nav-options-box">
<ul>
<li class="nav-option dropdown">
<a href="#" class="button">Beallitasok</a>
<div class="link-box">
<ul>
<li><a href="#" class="nav-link">Beallitas1</a></li>
<li><a href="#" class="nav-link">Beallitas2</a></li>
<li><a href="#" class="nav-link">Beallitas3</a></li>
</ul>
</div>
</li>
<li class="nav-option">
<a href="#">Lehetosegek</a>
</li>
<li class="nav-option">
<a href="#">Tobbet</a>
</li>
</ul>
</div>
</nav>

Answer 1

活动类被添加到链接框中。请使用下面的代码。

.link-box.active {
visibility: visible;}

工作的例子:

let button = document.querySelector('.button');
let linkBox = document.querySelector('.link-box');
button.addEventListener('click', () => {
linkBox.classList.toggle('active');
})

* {
margin: 0;
padding: 0;
}
.navbar {
height: 10vh;
background-color: black;
display: flex;
align-items: center;
}
.logo a {
text-decoration: none;
color: white;
font-size: 26px;
}
.logo {
padding-left: 7vh;
}
.nav-options-box {
margin-left: auto;
}
.nav-options-box ul {
display: flex;
list-style: none;
}
.nav-option a {
margin: 0 3vh;
color: white;
text-decoration: none;
}
.dropdown {
position: relative;
}
.link-box ul {
top: calc(100% + 2rem);
left: -3.6vh;
width: 200px;
height: 200px;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: space-evenly;
position: absolute;
text-align: center;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .4);
}
.link-box {
visibility: hidden;
}
.link-box ul a {
color: black;
}
.link-box.active {
visibility: visible;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
<nav class="navbar">
<div class="logo"><a href="#">LOGO</a></div>

<div class="nav-options-box">
<ul>
<li class="nav-option dropdown">
<a href="#" class="button">Beallitasok</a>

<div class="link-box">
<ul>
<li><a href="#" class="nav-link">Beallitas1</a></li>
<li><a href="#" class="nav-link">Beallitas2</a></li>
<li><a href="#" class="nav-link">Beallitas3</a></li>
</ul>
</div>
</li>

<li class="nav-option">
<a href="#">Lehetosegek</a>
</li>

<li class="nav-option">
<a href="#">Tobbet</a>
</li>
</ul>
</div>
</nav>

Answer 2

这是CSS错误。类名visibility在任何地方都不存在

Answer 3

要使其工作，您只需要将.visibility类更改为.link-box在最后一个CSS规则

let button = document.querySelector('.button');
let linkBox = document.querySelector('.link-box');
button.addEventListener('click', () => {
linkBox.classList.toggle('active');
})

* {
margin: 0;
padding: 0;
}
.navbar {
height: 10vh;
background-color: black;
display: flex;
align-items: center;
}
.logo a {
text-decoration: none;
color: white;
font-size: 26px;
}
.logo {
padding-left: 7vh;
}
.nav-options-box {
margin-left: auto;
}
.nav-options-box ul {
display: flex;
list-style: none;
}
.nav-option a {
margin: 0 3vh;
color: white;
text-decoration: none;
}
.dropdown {
position: relative;
}
.link-box ul {
top: calc(100% + 2rem);
left: -3.6vh;
width: 200px;
height: 200px;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: space-evenly;
position: absolute;
text-align: center;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .4);
}
.link-box {
visibility: hidden;
}
.link-box ul a {
color: black;
}
.link-box.active {
visibility: visible;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
<nav class="navbar">
<div class="logo"><a href="#">LOGO</a></div>

<div class="nav-options-box">
<ul>
<li class="nav-option dropdown">
<a href="#" class="button">Beallitasok</a>

<div class="link-box">
<ul>
<li><a href="#" class="nav-link">Beallitas1</a></li>
<li><a href="#" class="nav-link">Beallitas2</a></li>
<li><a href="#" class="nav-link">Beallitas3</a></li>
</ul>
</div>
</li>

<li class="nav-option">
<a href="#">Lehetosegek</a>
</li>

<li class="nav-option">
<a href="#">Tobbet</a>
</li>
</ul>
</div>
</nav>