原生JS使用hidden类实现导航栏点击显隐功能失效咨询

问题根源 #

你的代码失效是两个语法逻辑错误导致的：

• if条件错误使用了赋值运算符=而非比较逻辑，且没有用正确的类名判断方法：
  你写的if (nav.classList = 'hidden')是赋值操作，本身的返回值是字符串'hidden'，转为布尔值永远为true，所以所有点击都会触发if分支的逻辑，永远不会走到else分支。
  同时nav.classList是DOMTokenList类型的内置对象，不能直接和字符串做相等判断，判断元素是否包含指定类要调用classList.contains('类名')方法。
• 冗余的变量赋值不影响功能，但属于无用代码：addEventListener方法没有返回值，把它的执行结果赋值给btn变量没有实际意义。

修正后的JS代码 #

var nav = document.querySelector('nav');
var transf = document.getElementById('toggle');
document.querySelector('.iconBtn').addEventListener('click', i => {
  // 用contains判断是否存在hidden类
  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);
})

平滑过渡实现方案 #

display: none无法参与CSS过渡动画，你可以修改.hidden类的样式实现显隐过渡：

nav {
  /* 给nav加过渡效果，属性可按需调整 */
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* 如果需要完全隐藏后不占用页面空间，可以加下面两行，注意延迟时长要和过渡总时长匹配 */
  /* transition: all 0.3s ease, height 0s 0.3s ease; */
  /* height: 0; */
}

内容的提问来源于stack exchange，提问作者Fox17