时间戳

首页 > 解决方案 > 并在单击导航项和外部时删除类

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);
});

到目前为止，这是我想出的：

看演示

在此处查看演示

我希望以上内容是有道理的，有人可以帮助我，因为我真的被这个导航卡住了。

非常感谢！

标签： javascriptjquerycssnav

解决方案

由于您遇到的确切问题，我建议不要为此使用 jQuery。尝试使用Vue或Preact

但是，如果您坚持使用 jQuery，您的点击功能应该选择具有“活动”的项目，并相应地修改它及其兄弟项目。

https://codepen.io/anon/pen/aGwdXO

$(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");
    }
});

推荐阅读