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

Answer 2

也许这就是您要寻找的东西。

此代码可在单击另一个子菜单时关闭子菜单。

JavaScript

$(document).ready(function(){
    $('.dropdown-submenu a.test').on("click", function(e){

    /* This is to hide all dropdown-menu children if the parent(dropdown-submenu) in the element have been clicked */ 
    $(this).next('ul').find('.dropdown-menu').each(function(){
        $(this).hide();
    });

    /* This is to find another dropdown-menu have has been opened and hide its submenu */   
    var xw = $(this);
    $(this).closest(".dropdown-menu").find('.dropdown-submenu a.test').not(xw).each(function(){
        if($(this).next("ul").is(":visible")){
            $(this).next("ul").hide();
        }
    });

    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
    });
});

还有JSFiddle示例：https://jsfiddle.net/synz/vasho634/

Answer 3

我希望这就是你想要的。这是解决方案，不是完全证明，但要达到您想要的程度

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){

    siblingUl = $(this).parent().siblings("li.dropdown-submenu").children("ul").css("display");
    if(siblingUl == "block"){
    $(this).parent().siblings("li.dropdown-submenu").children("ul").toggle();
    }
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

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

3 个答案: