javascript - 在移动菜单中创建智能下拉级别

Question

我正在尝试构建一个具有多个级别的非 Canvas 菜单。我做了一个快速 codepen我早期的尝试。

如果另一个“1 级”(+) 链接打开，我如何更改下面的代码以使菜单关闭所有打开的部分？目前，我只是在任何被点击的元素上有一个切换。我想让它更智能一点。此外，如果上面的级别关闭，则它下面的所有级别也将关闭。

$('.off-canvas__content').on('click', '.nav-click', function(e) {
    e.preventDefault();

    $this = $(this);
    $this.children('i').toggleClass('icon-minus').toggleClass('icon-plus');
    $item = $this.parent('.nav__item');
    $item.toggleClass('nav__item--open');

});

Answer 1

将它添加到您的代码中将使一切正常，我想:

  if($item.hasClass('nav__item--open')) {
          $item.siblings().find('.nav__item--open').removeClass('nav__item--open');
          $item.siblings().find('.icon-minus').addClass('icon-plus').removeClass('icon-minus');
          $item.siblings().removeClass('nav__item--open');



     }

CodePen