Question

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

单击导航项时，应将 .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);
});

这是我到目前为止所提出的：

查看演示

See demo here

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

非常感谢你！

Answer 1

我建议不要使用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");
    }
});

Answer 2

检查一下。只需添加类showup1，showup2等，data-showup =＆＃34; 1＆＃34;，data-showup =＆＃34; 2＆＃34;每个菜单项中的attr。（在导航项目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

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

2 个答案: