并在点击导航项和外部时删除类

Question

我正在尝试构建需要执行以下操作的棘手导航菜单：

单击导航项时，应将 .active class 添加到该项目并从前一个项目中删除。

当一个下拉菜单打开并且您单击打开另一个下拉菜单时，前一个下拉菜单应该会关闭，而新的下拉菜单应该会单击一次打开。

当点击一个导航项目时，它应该打开它各自的下拉容器（目前它会同时打开每个下拉菜单。）它应该在它下面添加 .black-bg class 到 main-container 。

当单击下拉列表外的任何地方时，应删除其活动 class .active 以及 class .black- bg in main-container 在它下面。

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

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

查看演示

See demo here

我希望以上内容有意义并且有人可以帮助我，因为我真的坚持使用这个导航。

非常感谢！

Answer 1

我建议不要为此使用 jQuery，因为您运行遇到的确切问题。尝试使用 Vue or Preact

但是，如果您坚持使用 jQuery，您的点击功能应该 select 具有 "active" 的项目，并相应地修改它及其兄弟。

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

Answer 2

检查这个。只需在每个菜单项中添加 class showup1、showup2 等和 data-showup="1", data-showup="2" 属性。（在导航项目 1 和 2 中工作）。

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

Run

并在点击导航项和外部时删除类

And and remove classes when click on nav item and outside

javascript

css

jquery

nav

并在点击导航项和外部时删除 类

And and remove classes when click on nav item and outside

javascript

css

jquery

nav

并在点击导航项和外部时删除类