Javascript 单击导航项和外部时删除类

我正在尝试构建一个复杂的导航菜单，需要执行以下操作：

单击导航项目时，.active类应添加到该项目中，并从上一个项目中删除

当一个下拉列表打开，您单击打开另一个下拉列表时，上一个下拉列表应关闭，新下拉列表应在单击后打开

单击导航项目时，它应打开相应的下拉列表容器（此时它会同时打开每个下拉列表） 它应该在它下面的主容器中添加.black bg类

单击下拉列表外的任何位置时，其活动类.active以及其下方主容器中的类.black bg都应被删除

JS

$(document).ready(function() {

$(".click").on("click", function(evt) {
    evt.stopPropagation();
    $(this).toggleClass("active");
    $(".showup").slideToggle(200);
    $(".main-container").toggleClass("black-bg");
});
$(".showup").on("click", function(evt) {
    evt.stopPropagation();
});

});

$(document).on("click", function() {
    $(".showup").slideUp(50);
});

这就是我到目前为止的想法：

见演示

我希望上面的话有道理，有人能帮助我，因为我真的被这个导航卡住了

---

非常感谢你

我建议不要为此使用jQuery，因为您正遇到确切的问题。尝试使用或

但是，如果您坚持使用jQuery，您的单击函数应该选择具有“活动”的项，并相应地修改它及其同级项

---

看看这个。只需在每个菜单项中添加类showup1、showup2等和data showup=“1”、data showup=“2”attr。（在导航项目1和2中工作）

---

我真的必须使用jQuery。你的例子很好，谢谢。但是，第3项和第4项在单击时似乎有一些问题。@Tiago如果您是说它们没有下拉列表，那就是您定义HTML的方式——没有问题，这是预期的行为。仔细检查代码。第3项和第4项中没有“导航内容”。一件奇怪的事情是，在上线后，它的表现非常糟糕。你的网站使用的是旧代码：请将我的答案标记为正确，如果你有服务器问题，请打开一个新问题。你是对的。我一定太累了，哈哈。谢谢你的帮助！

$(document).ready(function() {

  $(".click").on("click", function(evt) {
      evt.stopPropagation();
    if ($(this).hasClass("active")) {
      return;
    }
      $(".active").parent().find(".showup").slideToggle(200);
      $(".active").toggleClass("active");
      $(this).toggleClass("active");
      $(this).parent().find(".showup").slideToggle(200);
      if (!$(".main-container").hasClass("black-bg")) {
        $(".main-container").toggleClass("black-bg");
      }
  });
  $(".showup").on("click", function(evt) {
      evt.stopPropagation();
  });

});

$(document).on("click", function() {
    $(".active").parent().find(".showup").slideUp(50);
    $(".active").toggleClass("active");
    if ($(".main-container").hasClass("black-bg")) {
      $(".main-container").toggleClass("black-bg");
    }
});

$(".click").on("click", function(evt) {
    evt.stopPropagation();
    var showup = $(this).data('showup');
    if(!$(this).hasClass('active')){
    $('.active').removeClass('active');
    $(this).addClass("active");
    $(".showup").hide();
    $(".showup"+showup).slideToggle(200);
    $(".main-container").addClass("black-bg");
});