Question

我正在学习vanilla javascript，我想在点击汉堡图标时实现与http://www.startupturkey.com/类似的导航功能。我试过但是无法切换汉堡包图标以在点击时删除图标，反之亦然以及导航项目在参考链接中显示。我尝试的是获取图标属性类的值，如果值是内容则将其更改为删除，反之亦然。我也创造了一个小提琴，这里是它的链接

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。任何人都可以帮助我使用vanilla javascript吗？

Answer 1

我可以这样做，但如果有人对代码改进提出建议，请建议我

Declare @YourTable table (Code varchar(25),Previous_Code varchar(25))
Insert into @YourTable values 
 ('AA2016', 'AA2015')
,('AA2015', 'AA2014')
,('AA2014', 'AA2013')
,('AA2013', null),
 ('BB2016', 'BB2015')
,('BB2015', 'BB2014')
,('BB2014', 'BB2013')
,('BB2013', null),
 ('CC2016', 'CC2015')
,('CC2015', 'CC2014')
,('CC2014', 'CC2013')
,('CC2013', null)

;with cteP as (
      Select Code
            ,Previous_Code 
            ,Master_Parent = Code
            ,Master_Parent_History = cast(Code as varchar(200))
      From   @YourTable 
      Where  Previous_Code is Null
      Union  All
      Select r.Code
            ,r.Previous_Code 
            ,p.Master_Parent
            ,cast(r.Code+','+p.Master_Parent_History as varchar(200))
      From   @YourTable r
      Join   cteP p on r.Previous_Code  = p.Code)
Select Code
      ,Previous_Code 
      ,Master_Parent
      ,Master_Parent_History = case when Master_Parent_History=Code then null else  replace(Master_Parent_History,Code+',','') end
 From  cteP
 Order By Left(Code,1), Code Desc

Answer 2

我认为http://www.startupturkey.com/中的这个简单使用div来覆盖菜单汉堡图标，当您切换汉堡图标时，div淡出但不会删除汉堡图标（您可以使用开发工具F12查看）。

作为你的小提琴，我为你编辑了另一个具有此效果的版本（但不是那个漂亮的XDD）

https://jsfiddle.net/GeorgioWan/0taywkL5/1/

P.S。动画来自Animate.css

无法切换导航项和图标

2 个答案: