单击任意位置添加/删除类以删除除子元素或子取消按钮之外的类

Question

我试图创建一个在点击事件上转换的导航。它还包含一个链接，其中包含对click事件的另一个过渡效果。我想使用一个类，以便我可以使用媒体查询进行相应的设置。我是JS / jQuery的新手，我已经研究/设法让切换工作，但我仍然试图干净地编写一个方法来实现以下目标：

点击nav-toggle

时

• addClass isVisible to .nav-toggle
• addClass isVisible to .menu

点击eventList-toggle

• 从.nav-toggle
中删除类isVisible
• 从.menu
中删除类isVisible
• 将类isVisible添加到#events

点击#events以外的任何地方或点击提交和取消按钮

• 从#events
中删除类isVisible

我写了一个基本的小提琴，我现在拥有的但仍然无法通过提交和取消按钮来关闭#events元素，这也不会隐藏menu点击事件的东西link（menu只会隐藏在设备视口中，因此该类）。 https://jsfiddle.net/ngoh8gej：

我可能在我的代码中离开，甚至尴尬，但我相信这可以解决问题。任何帮助是极大的赞赏。提前谢谢。

Answer 1

我根据您的要求更新了您的小提琴：

https://jsfiddle.net/ngoh8gej/18/

我清理了一些代码（删除了不必要的$(function(){），在提交和取消按钮中添加了ID，添加了事件来处理它们：

$('#submit, #cancel').click(function(e) {
  e.stopPropagation();
});

并更改了您的活动以关闭#events div：

$(document).on('click', function(event) {
  if (event.target.id !== 'events') {
    $('.isVisible').removeClass('isVisible')
  }
});