引导下拉菜单关闭上游子菜单

我想你差不多有了,你只需要寻找不同的点击。

我在下面采取的方法是处理所有 a 单击,然后检查它是否有 test 如果没有 测试 然后它会隐藏所有子菜单并转到其默认的ref。

<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

也许这就是你要找的。

此代码用于在单击其他子菜单时关闭子菜单。

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/

我希望这是你想要的。这是解决办法,不是充分的证据,而是你想要的程度

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