如何防止bootstrap在只点击一个子菜单时折叠所有的子菜单？

$('.dropdown-submenu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
    }
    var $subMenu = $(this).next('.dropdown-menu');
    $subMenu.toggleClass('show');
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show').removeClass('show');
    });
    return false;
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-submenu/dist/css/bootstrap-submenu.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-submenu/dist/js/bootstrap-submenu.min.js"></script>

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <ul class="dropdown-menu" data-submenu>
    <li class="dropdown-item"><a href="#">Submenu 1</a></li>
    <li class="dropdown-item"><a href="#">Submenu 2</a></li>
  </ul>
</li>

.dropdown-submenu .dropdown-menu {
    display: block;
}