Javascript 单击时，将以前单击的图标切换回它'；原始状态

我在一个导航栏上有两个下拉菜单，只要点击了锚，图标就可以切换，但我不知道如果点击了一个单独的子菜单，如何让图标复位。我想问的是，是否有一种方法可以通过现在的布局实现这一点，如果没有，我如何实现这一点

如果这整件事充斥着新手的错误，我也很抱歉

我试图尽可能多地压缩图标，但您可能需要展开侧面部分以查看右侧受影响的图标。我省略了响应部分

$（文档）.ready（函数（）{
$（'.menu toggle'）。单击（函数（）{
$（'nav'）.toggleClass（'active'））
})
$（'ul li'）。单击（函数（）{
$（this.sides（）.removeClass（'active'）；
$（this.toggleClass（'active'）；
})
})
$（“nav ul li a”）。单击（函数（）{
$（this.find（“i”）.toggleClass（“fa角度向下，fa角度向上”）；
});
正文{
保证金：0；
填充：0；
字体系列：“Helvetica Neue”，无衬线；
背景：url（img/sunset.jpg）；
背景附件：固定；
背景位置：中心；
}
标题{
位置：绝对位置；
排名：0；
左：0；
填充：0 20px；
背景：#000000；
宽度：100%；
框大小：边框框；
}
.标题图标{
颜色：白色；
}
收割台导航ul li a.有效跨度{
颜色：红色；
}
标题导航{
浮动：对；
}
标题导航ul{
保证金：0；
填充：0；
显示：内联flex；
}
标题nav ul li{
列表样式：无；
位置：相对位置；
}
.子菜单{
颜色：fff；
}
收割台导航{
位置：绝对位置；
左：0；
显示：无；
}
收割台导航ul li.active ul{
显示：块；
}
标题导航ul li ul li{
显示：块；
宽度：自动；
文本对齐：居中；
}
标题导航ul li a{
背景：线性梯度（#000000，#34282C）；
边框样式：插图；
边框颜色：#000；
}
/*全屏标题*/
标题nav ul li a{
字体系列：“Helvetica Neue”，无衬线；
高度：50px；
线高：50px；
填充：0 20px；
颜色：#fff；
文字装饰：无；
显示：块；
}
收割台导航ul li a：悬停{
过渡：.25s；
字号：；
颜色：#000000；
背景：2196f3；
}
收割台导航ul li a激活{
背景：#25383C；
字体大小：正常；
颜色：#fff；
}
收割台导航ul li a.激活：之前{
内容：'\f096'；
字体系列：Fontsome；
字体大小：25%；
位置：绝对位置；
线高：50px；
底部：20px；
右：2px；
颜色：#fff；
光标：指针；
}
.菜单切换{
颜色：#fff；
浮动：对；
线高：50px；
字体大小：24px；
光标：指针；
显示：无；
}

实践

















通常通过以下方式实现：

把所有的箭头都放下来
使箭头向上
此功能适用于您：

  $("nav ul li a").click(function() {
    // Cache variables (for speed)
    var $this = $(this),
        $arrow = $this.find('.sub-menu i');

    // Make all arrows point down, excepted clicked arrow
    $('.sub-menu i').not($arrow).addClass('fa-angle-down').removeClass('fa-angle-up');

    // Toggle this arrow
    $arrow.toggleClass("fa-angle-down fa-angle-up");
  });


$（文档）.ready（函数（）{
$（'.menu toggle'）。单击（函数（）{
$（'nav'）.toggleClass（'active'））
})
$（'ul li'）。单击（函数（）{
$（this.sides（）.removeClass（'active'）；
$（this.toggleClass（'active'）；
});
//进入$（document.ready（），了解良好做法
$（“nav ul li a”）。单击（函数（）{
//缓存变量（用于速度）
变量$this=$（this），
$arrow=$this.find（'.sub-menu i'）；
//使所有箭头指向下方，单击箭头除外
$（'.sub-menu i'）。非（$arrow）。添加类（'fa-angle-down'）。移除类（'fa-angle-up'）；
//切换此箭头
$arrow.toggleClass（“fa角度向下fa角度向上”）；
});
})
正文{
保证金：0；
填充：0；
字体系列：“Helvetica Neue”，无衬线；
背景：url（img/sunset.jpg）；
背景附件：固定；
背景位置：中心；
}
标题{
位置：绝对位置；
排名：0；
左：0；
填充：0 20px；
背景：#000000；
宽度：100%；
框大小：边框框；
}
.标题图标{
颜色：白色；
}
收割台导航ul li a.有效跨度{
颜色：红色；
}
标题导航{
浮动：对；
}
标题导航ul{
保证金：0；
填充：0；
显示：内联flex；
}
标题nav ul li{
列表样式：无；
位置：相对位置；
}
.子菜单{
颜色：fff；
}
收割台导航{
位置：绝对位置；
左：0；
显示：无；
}
收割台导航ul li.active ul{
显示：块；
}
标题导航ul li ul li{
显示：块；
宽度：自动；
文本对齐：居中；
}
标题导航ul li a{
背景：线性梯度（#000000，#34282C）；
边框样式：插图；
边框颜色：#000；
}
/*全屏标题*/
标题nav ul li a{
字体系列：“Helvetica Neue”，无衬线；
高度：50px；
线高：50px；
填充：0 20px；
颜色：#fff；
文字装饰：无；
显示：块；
}
收割台导航ul li a：悬停{
过渡：.25s；
字号：；
颜色：#000000；
背景：2196f3；
}
收割台导航ul li a激活{
背景：#25383C；
字体大小：正常；
颜色：#fff；
}
收割台导航ul li a.激活：之前{
内容：'\f096'；
字体系列：Fontsome；
字体大小：25%；
位置：绝对位置；
线高：50px；
底部：20px；
右：2px；
颜色：#fff；
光标：指针；
}
.菜单切换{
颜色：#fff；
浮动：对；
线高：50px；
字体大小：24px；
光标：指针；
显示：无；
}

实践

















这是另一个解决方案，仅供参考。我在li标记t下检查活动类
  $('.menu-toggle').click(function(){
      $('nav').toggleClass('active')
  })
  $('ul li').click(function(){
      $(this).siblings().removeClass('active');
      $(this).toggleClass('active');

      // Check for active class
      if($(this).hasClass('active')){
        $(this).parent().find("i").removeClass("fa-angle-up").addClass("fa-angle-down");        
      } 
      $(this).find("i").toggleClass("fa-angle-down fa-angle-up");
  })