javascript - 无法切换导航项目和图标

Question

我正在学习 vanilla javascript，我想实现类似于 http://www.startupturkey.com/ 的导航功能。当点击汉堡图标时。我尝试过，但无法切换汉堡包图标以在单击时删除图标，反之亦然，并且导航项也会像引用链接中那样显示。我尝试的是获取图标属性类的值，如果值是内容，则将其更改为删除，反之亦然。我也创建了一个 fiddle ，这是它的链接

https://jsfiddle.net/0taywkL5/

这也是我的代码

<header class="header">
      <!-- <i class="reorder icon"></i> -->
      <a href="#" class="header__logo">LOGO</a>
      <i class="content icon header-icon" style="float: right;"></i>
      <div class="ui vertical menu" style="display:none;">
        <a class="active teal item">
          Blog
        </a>
        <a class="item">
          Discussion
        </a>
        <a class="item">
          Features
        </a>
        <a class="item">
          Team
        </a>
      </div>
    </header>
    <section class="home-header show">
      <div class="overlay"></div>
      <div class="request-invitation">
        <h2>REQUEST AN INVITATION</h2>
      </div>
      <div class="connyct-short-intro">
        <h1>HEADING IN THE MIDDLE OF IMAGE</h1>
      </div>
    </section>


document.querySelector('.header-icon').addEventListener('click', function(){
  var value = this.getAttribute('class');
   if (value === "content"){
     console.log('yes content');
     this.classList.remove('content');
     this.classList.add('remove');
   } else {
     this.classList.remove('remove');
     this.classList.add('content');
   }
    var verticalMenu = document.querySelector('.vertical');
    verticalMenu.style.display = 'block';
});

我不想跳到jquery。谁能帮我使用普通的 javascript 吗？

Answer 1

我可以做到这一点，但如果有人对代码改进有建议，请建议我

document.querySelector('.header-icon').addEventListener('click', function(){
  var value = this.getAttribute('class');
   if (this.className === "icon header-icon content"){
     console.log('yes content');
     this.classList.remove('content');
     this.classList.add('remove');
   } else {
     this.classList.remove('remove');
     this.classList.add('content');
   }
    var verticalMenu = document.querySelector('.vertical');
    verticalMenu.style.display = verticalMenu.style.display === "none" ? "block" : "none";
});