带有“隐藏”类的纯 JS 显示/隐藏不起作用

Question

所以我试图做一个导航栏，当点击切换图标时显示/隐藏。 我已经通过不使用隐藏类解决了这个问题（使用 onclick 使用 if 语句触发一个简单的函数，该语句更改我试图显示/隐藏的元素的 style.display）。 是的，它有效，但我试图理解 Javascript（纯），所以我真的需要知道为什么我的第一个解决方案（隐藏类）没有成功。 这是一些代码（HTML/CSS 然后是我在纯 JS 中的尝试）：

 var nav = document.querySelector('nav'); var transf = document.getElementById('toggle'); var btn = document.querySelector('.iconBtn').addEventListener('click', i => { if (nav.classList = 'hidden') { nav.classList.remove('hidden'); transf.checked = true; console.log('show'); } else { nav.classList.add('hidden'); transf.checked = false; console.log('hide'); } console.log(nav.classList); console.log(transf.checked); })

 .hidden { display: none; }

 <div class="navMenu"> <nav class="hidden"> <ul> <li><a href="#">About</a></li> <li><a href="#">Innovations</a></li> <li><a href="#">Group</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="iconBtn"> <div class="toggle"> <input type="checkbox" id="toggle"> <label class="bars" id="bar1" for="toggle"></label> <label class="bars" id="bar2" for="toggle"></label> <label class="bars" id="bar3" for="toggle"></label> </div> </div> </div>

所以这就是我试图用 js 部分做的事情：

• 给每个选择器一个 var
• 触发和 if 语句的 btn 上的事件侦听器
• 基本的 if 语句
• 需要 transf (toggle) 检查因为我设计了图标的样式：当它被选中时，它从一个列表图标变成一个 X
• 然后到处都是 console.logs 试图了解发生了什么。

我还尝试添加第二个 CSS 类（.not-hidden: display ='flex';）以从一个切换到另一个：不。

我试图通过 switch case 更改 if 语句：与 if 语句相同的问题。

行为：第一次点击，'hidden'类被移除，如果console.log返回“show”，class = ''，check为true：perfectenschlag。 但是，当我再次单击时，不会添加“隐藏”类（也没有切换，我尝试过）并且 console.log 提供与第一次单击相同的反馈，没有更改任何内容。

tdlr：首先单击添加类（并显示导航栏），但第二次单击时触发，不会更改类。 看起来 if 语句似乎只返回 if，而从不返回 else，即使 else 是唯一可能的选项。

最后，我知道这段代码很可能完全是垃圾，正如我所说，我找到了另一个解决方案，但由于我刚刚开始使用 JS，我认为了解 JS 的行为方式很重要这就是我来这里问的原因。 另外，我不知道如何在“nav.style.display”上进行平滑过渡，所以我不会放弃隐藏类的方式。

Answer 1

我清理了代码，并使用 .toggle() 简化了类切换。

看起来它对我有用。

 var nav = document.querySelector('nav'); var btn = document.querySelector('.iconBtn') btn.addEventListener( 'click', () => nav.classList.toggle("hidden") );

 .hidden { display: none; }

 <div class="navMenu"> <nav class="hidden"> <ul> <li><a href="#">About</a></li> <li><a href="#">Innovations</a></li> <li><a href="#">Group</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="iconBtn"> <div class="toggle"> <input type="checkbox" id="toggle" /> <label class="bars" id="bar1" for="toggle"></label> <label class="bars" id="bar2" for="toggle"></label> <label class="bars" id="bar3" for="toggle"></label> </div> </div>

Answer 2

if (nav.classList = 'hidden')不是您检查列表是否包含该类的方式。 相反，它试图将'hidden'分配给属性classList 。

要检查它是否已经拥有它，请使用contains ：

if (nav.classList.contains('hidden'))

 var nav = document.querySelector('nav'); var transf = document.getElementById('toggle'); var btn = document.querySelector('.iconBtn').addEventListener('click', i => { if (nav.classList.contains('hidden')) { nav.classList.remove('hidden'); transf.checked = true; console.log('show'); } else { nav.classList.add('hidden'); transf.checked = false; console.log('hide'); } console.log(nav.classList); console.log(transf.checked); })

 .hidden { display: none; }

 <div class="navMenu"> <nav class="hidden"> <ul> <li><a href="#">About</a></li> <li><a href="#">Innovations</a></li> <li><a href="#">Group</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div class="iconBtn"> <div class="toggle"> <input type="checkbox" id="toggle"> <label class="bars" id="bar1" for="toggle"></label> <label class="bars" id="bar2" for="toggle"></label> <label class="bars" id="bar3" for="toggle"></label> </div> </div> </div>

Answer 3

您不需要使用 classList 删除，而是使用 setAttribute 来更改您的隐藏属性。