Javascript-форум - Dropdown в Dropdown при клике

Добрый день!
Помогите пожалуйста, не могу разобраться.
Использую реализацию dropdown в dropdown для Bootstrap.
Взял пример отсюда:

https://www.w3schools.com/bootstrap/..._css&stacked=h

Но мне надо разместить несколько dropdown внутри одного dropdown.
При клике на один dropdown, раскрывается следующий dropdown, как и надо. Но при клике на другие dropdown предыдущие не закрываются.
Как сделать чтобы закрывались предыдущие?

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

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

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">МЕНЮ <span class="caret"></span></button> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a class="test" href="#">New dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">2rd level dropdown</a></li> <li><a href="#">2rd level dropdown</a></li> </ul> <li class="dropdown-submenu"> <a class="test" href="#">Another dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">2rd level dropdown</a></li> <li><a href="#">2rd level dropdown</a></li> </ul> </li> </li> </ul> </div>