title: how to automatically close submenu on dropdown-menu in Bootstrap 4
body: <p>I want submenu in my dropdown menu to be closed when dropdown menu closed.
  But now submenu remains open if I toggle dropdown menu again. </p>
  
  <p><a href="https://plnkr.co/edit/YUmUGHctRlypUq1BNA0p?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/YUmUGHctRlypUq1BNA0p?p=preview</a> </p>
  
  <p>HTML </p>
  
  <pre><code>    &lt;nav id="sideNavBar"&gt;
        &lt;ul class="nav nav-pills nav-stacked"&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" id="menu" data-toggle="dropdown" class="droptown-toggle"&gt;Dropdown&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li class="dropdown-submenu"&gt;
                &lt;a href="#" class="test" data-toggle="dropdown"&gt;Submenu-1&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;
                    &lt;a href="#"&gt;Item-1&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>  $(document).ready(function() {
      var $links = $('.dropdown-submenu a.test').on("click", function(e) {
        var submenu = $(this).next();
          $subs.not(submenu).hide()
          submenu.toggle();
        //$(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
      var $subs = $links.next();
  
    });
  </code></pre>