javascript - Bootstrap 下拉子菜单关闭上游子菜单

Question

我有一个两级下拉菜单，效果很好，但是当我添加另一个级别时，JS 似乎正在从上一个子菜单中删除 open 类，这意味着所需的第三级无法看到菜单，即使它确实添加了 open 类。

我已经追踪到这个 JS:

  $(function() {

  $('li.dropdown-submenu').on('click', function(event) {
      event.stopPropagation();
      if ($(this).hasClass('open')){
          $(this).removeClass('open');
      } else {
          $('li.dropdown-submenu').removeClass('open');
          $(this).addClass('open');
     }
  });
});

我认为，这是对上一个子菜单的意外关闭。 HTML 与 this 非常相似示例。

使用该示例中的 JS 改编版，我获得了第三级，但是当单击另一个子菜单时，任何给定的打开子菜单都不会自动关闭。

$(document).ready(function(){
  $('.dropdown-submenu a').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

这里需要两者的精华!

Answer 1

我想您差不多搞定了，您只需要寻找不同的点击次数。

我在下面采用的方法是处理所有 a 点击，然后检查它是否有一个 test 类，然后逐字跟随您的代码，否则，如果它没有 test 类，然后隐藏所有子菜单并转到默认 href。

<script>
$(document).ready(function(){
  $('.dropdown-submenu a').on("click", function(e){
    if ($(this).hasClass('test')) {
      $(this).next('ul').toggle();
      e.stopPropagation();
      e.preventDefault();
    } else {
      $('.dropdown-submenu ul').hide();
    }
  });
});
</script>

您更新后的工作示例:https://www.w3schools.com/code/tryit.asp?filename=FUB7ECWP20DA