title: Bootstrap 4 Multi dropdown nav toggle issue
body: <p>I have a drop-down menu which works with bootstrap 4 alpha. But it's not working in bootstrap 4 beta.</p>
  
  <p>When I click on the 2nd dropdown menu it closes automatically. But it was working fine before.</p>
  
  <p>I've tried change the div with a <code>ul</code> dropdown inside a drop-down, but that doesn't work in beta version but it was working fine in alpha. Can someone help me with this one?</p>
  
  <p>Here is the <a href="https://jsfiddle.net/mu9h0tsx/1/" rel="nofollow noreferrer"><strong>jsfiddle link</strong></a> </p>
  
  <p>Here's the dropdown link code structure:</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;Navbar&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;div class="collapse navbar-collapse" id="navbarNavDropdown"&gt;
      &lt;ul class="navbar-nav"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item dropdown"&gt;
            &lt;a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
              Dropdown link
            &lt;/a&gt;
            &lt;ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"&gt;
              &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-item dropdown-toggle" href="#"&gt;Submenu&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                   &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Submenu action&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another submenu action&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a class="dropdown-item dropdown-toggle" href="#"&gt;Subsubmenu&lt;/a&gt;
                    &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Subsubmenu action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another subsubmenu action&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                   &lt;/li&gt;
                   &lt;li&gt;&lt;a class="dropdown-item dropdown-toggle" href="#"&gt;Second subsubmenu&lt;/a&gt;
                    &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Subsubmenu action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;Another subsubmenu action&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                   &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$( document ).ready( function () {
      $( '.navbar a.dropdown-toggle' ).on( 'click', function ( e ) {
          var $el = $( this );
          var $parent = $( this ).offsetParent( ".dropdown-menu" );
          $( this ).parent( "li" ).toggleClass( 'show' );
  
          if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
              $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
          }
          $( '.navbar-nav li.show' ).not( $( this ).parents( "li" ) ).removeClass( "show" );
          return true;
      } );
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.navbar-light .navbar-nav .nav-link {
      color: rgb(64, 64, 64);
  }
  .btco-menu li &gt; a {
      padding: 10px 15px;
      color: #000;
  
  }
  
  .btco-menu .active a:focus,
  .btco-menu li a:focus ,
  .navbar &gt; .show &gt; a:focus{
      background: transparent;
      outline: 0;
  }
  
  
  .dropdown-menu .show &gt; .dropdown-toggle::after{
      transform: rotate(-90deg);
  }
  </code></pre>