Enhancing Navigation with Bootstrap 4 Multilevel Dropdowns

Is there a straightforward way to create a multilevel dropdown in Bootstrap 4? I've looked at examples on SO, but they either seem too complex or don't include the navigation aspect.

I attempted nesting a dropdown within another dropdown, but it doesn't appear to be functioning correctly. Can someone provide guidance on this?

Below is the basic structure of my code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

This specific CSS and JavaScript code snippet utilizes an additional class known as dropdown-submenu. It has been thoroughly tested with Bootstrap 4 beta, showcasing its compatibility.

One of its key features is its ability to support multi-level submenus effortlessly.

Upon clicking on any element within a dropdown menu that includes the 'dropdown-toggle' class, this script triggers a series of operations. Firstly, it checks if the next sibling does not have the 'show' class, removing this class from any ancestor elements with the same class in order to ensure only one submenu remains visible at a time.
The specific styles applied to the '.dropdown-submenu' class enhance the display of these elements by positioning the dropdown appropriately and rotating an icon arrow for easy navigation.
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}
Including the necessary style and script files is essential for proper execution, enabling seamless integration with Bootstrap 4 components such as the navbar dropdown feature. The HTML structure showcases how the dropdown functionality can be implemented using classes like 'dropdown-item' and 'dropdown-submenu', allowing for nested levels of menus.

Answer №2

This MultiLevel dropdown is customized based on Bootstrap4. I implemented it following the basic principles of Bootstrap4 dropdown.

.dropdown-submenu{
    position: relative;
}
.dropdown-submenu a::after{
    transform: rotate(-90deg);
    position: absolute;
    right: 3px;
    top: 40%;
}
.dropdown-submenu:hover .dropdown-menu, .dropdown-submenu:focus .dropdown-menu{
    display: flex;
    flex-direction: column;
    position: absolute !important;
    margin-top: -30px;
    left: 100%;
}
@media (max-width: 992px) {
    .dropdown-menu{
        width: 50%;
    }
    .dropdown-menu .dropdown-submenu{
        width: auto;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" data-toggle="dropdown" href="#">Something else here</a>
            <ul class="dropdown-menu">
              <a class="dropdown-item" href="#">A</a>
              <a class="dropdown-item" href="#">b</a>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer №3

Latest Update in 2018

Presenting a different take on the Bootstrap 4.1 Navbar featuring multi-level dropdown functionality. This version uses minimal CSS for the submenu and can be easily repositioned:

https://i.sstatic.net/CWLQE.png

Access the code here

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

Utilize jQuery to manage display of submenus:

$('.dropdown-submenu > a').on("click", function(e) {
    var submenu = $(this);
    $('.dropdown-submenu .dropdown-menu').removeClass('show');
    submenu.next('.dropdown-menu').addClass('show');
    e.stopPropagation();
});

$('.dropdown').on("hidden.bs.dropdown", function() {
    // hide any open menus when parent closes
    $('.dropdown-menu.show').removeClass('show');
});

Refer to this answer for enabling the hover feature with Bootstrap 4 submenus

Check out: Fixing missing Bootstrap dropdown submenus

Answer №4

I came across this multi-drop-down menu that works great on all devices.

Additionally, it has a hover style.

This menu supports multi-level submenus with Bootstrap 4.

$( 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 false;
    } );
} );
.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-menu li > a {
    padding: 10px 15px;
    color: #000;
}

.btco-menu .active a:focus,
.btco-menu li a:focus ,
.navbar > .show > a:focus{
    background: transparent;
    outline: 0;
}

.dropdown-menu .show > .dropdown-toggle::after{
    transform: rotate(-90deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded btco-menu">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Submenu action</a></li>
                            <li><a class="dropdown-item" href="#">Another submenu action</a></li>

                            <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                </ul>
                            </li>
                            <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">Subsubmenu action</a></li>
                                    <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Answer №5

When using standard HTML without the need for additional CSS styles and classes, it provides a seamless native support feel.

To achieve this effect, simply include the following code:

$.fn.dropdown = (function() {
    var $bsDropdown = $.fn.dropdown;
    return function(config) {
        if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
            $('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
            $(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
        }
        var ret = $bsDropdown.call($(this), config);
        $(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
        return ret;
    }
})();

$(function() {
    $('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
        $(this).dropdown('toggle');
        e.stopPropagation();
    });
    $('.dropdown').on('hide.bs.dropdown', function(e) {
        if ($(this).is('.has-child-dropdown-show')) {
            $(this).removeClass('has-child-dropdown-show');
            e.preventDefault();
        }
        e.stopPropagation();
    });
});

It's worth noting that with Bootstrap's dropdown feature, you have the flexibility to modify it to be multi-level deep. It's unfortunate that this was not included in the default settings.

For those interested in a hover version, check out: https://github.com/dallaslu/bootstrap-4-multi-level-dropdown

For a demonstration of this feature, see: https://jsfiddle.net/dallaslu/adky6jvs/ (compatible with Bootstrap v4.4.1)

Answer №6

This particular example is designed to function with Bootstrap 4.3.1.

To view it in action, you can check out the Jsfiddle link here: https://jsfiddle.net/ko6L31w4/1/

The HTML code might appear slightly complex due to the creation of a detailed dropdown menu for thorough testing purposes, but overall, everything should be fairly straightforward.

In terms of functionality, the JavaScript includes fewer methods to collapse opened dropdowns while the CSS only provides minimal styling for full functionalities.

$(function() {
  $("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
    event.preventDefault();
    event.stopPropagation();
    
    //method 1: remove show from siblings and their children under your first parent
    
/* if (!$(this).next().hasClass('show')) {
      
        $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
     }  */     
     
     
    //method 2: remove show from all siblings of all your parents
    $(this).parents('.dropdown-submenu').siblings().find('.show').removeClass("show");
    
    $(this).siblings().toggleClass("show");
    
    
    //collapse all after nav is closed
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
      $('.dropdown-submenu .show').removeClass("show");
    });

  });
});
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-md navbar-light bg-white py-3 shadow-sm">
  <div class="container-fluid">
    <a href="#" class="navbar-brand font-weight-bold">Multilevel Dropdown</a>
    
  <button type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
    <span class="navbar-toggler-icon"></span>
  </button>


  <div id="navbarContent" class="collapse navbar-collapse">
      <ul class="navbar-nav mr-auto">
      
        <!-- Navigation dropdown -->
        <li class="nav-item dropdown">
        
          <a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle">Dropdown</a>
          <ul class="dropdown-menu">
            
            <li><a href="#" class="dropdown-item">Some action</a></li>
            
            <!-- Level 1 dropdown -->
            <li class="dropdown-submenu">
              <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a>
              <ul class="dropdown-menu">
                <li><a href="#" class="dropdown-item">level 2</a></li>
                
                <!-- Level 2 dropdown -->
                <li class="dropdown-submenu">
                  <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
                  <ul class="dropdown-menu">
                    <li><a href="#" class="dropdown-item">level 3</a></li>
                    
                    <!-- Level 3 dropdown --> 
                    <li class="dropdown-submenu">
                      <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 3</a>
                      <ul class="dropdown-menu">
                        <li><a href="#" class="dropdown-item">level 4</a></li>
                      </ul>
                    </li>
                    
                  </ul>
                </li>

                <li><a href="#" class="dropdown-item">level 2</a></li>
                <li><a href="#" class="dropdown-item">level 2</a></li>
              </ul>
            </li>
            
            <li><a href="#" class="dropdown-item">Some other action</a></li>
            
            <li class="dropdown-submenu">
              <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 1</a>
              <ul class="dropdown-menu">
                
                <li class="dropdown-submenu">
                  <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
                  <ul class="dropdown-menu">
                    <li><a href="#" class="dropdown-item">level 3</a></li>
                    <li><a href="#" class="dropdown-item">level 3</a></li>
                  </ul>
                </li>
                
                <li class="dropdown-submenu">
                  <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
                  <ul class="dropdown-menu">
                    <li><a href="#" class="dropdown-item">level 3</a></li>
                    <li><a href="#" class="dropdown-item">level 3</a></li>
                  </ul>
                </li>

                <li><a href="#" class="dropdown-item">level 2</a></li>
                
                                <li class="dropdown-submenu">
                  <a href="#" role="button" data-toggle="dropdown" class="dropdown-item dropdown-toggle">level 2</a>
                  <ul class="dropdown-menu">
                    <li><a href="#" class="dropdown-item">level 3</a></li>
                    <li><a href="#" class="dropdown-item">level 3</a></li>
                  </ul>
                </li>
                
                <li><a href="#" class="dropdown-item">level 2</a></li>
              </ul>
            </li>  
          </ul>
        </li>

        <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Services</a></li>
        <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer №7

Discover a simpler method for achieving this task. While using bootstrap 5, I found that it also functions on bootstrap 4. Instead of using the "nav-item" class, try implementing the "btn-group" class. The best part is no jQuery or manual class creation required! Take a look at this code snippet.

NOTE: This display works better in full page view!

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62000d0d16111610031222574c504c51">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7e7373686f686e7d6c5c29322e322f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<nav class="navbar navbar-expand-xl navbar-dark bg-primary bg-gradient">
    <div class="container-fluid">
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                

                
        <li class="btn-group">
          <div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Clickable inside
          </div>
          <ul class="dropdown-menu">
            <li>
              <div class="btn-group dropend">
                <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                  Clickable inside
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                </ul>
              </div>
            </li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
          </ul>
        </li>
        <li class="btn-group">
          <div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Clickable inside
          </div>
          <ul class="dropdown-menu">
            <li>
              <div class="btn-group dropend">
                <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                  Clickable inside
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                </ul>
              </div>
            </li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
          </ul>
        </li>
            </ul>
        </div>
    </div>
</nav>

</body>

Answer №8

In addition to the response provided by Carol Skelly ()

I made some updates to the navigation bar by adding a few IDs to allow submenus to be closed if clicked again

Updated HTML code for the navigation section

<li class="nav-item dropdown">
   <a href="#" id="menu" 
      data-toggle="dropdown" class="nav-link dropdown-toggle"
      data-display="static">Dropdown</a>
   <ul id="parentUL" class="dropdown-menu">
      <li id="subMenu1" class="dropdown-item dropdown-submenu">
         <a id="subMenu1link" href="#" data-toggle="dropdown" class="dropdown-toggle">Submenu-1</a>
         <ul id="dropdownmenu1" class="dropdown-menu subUL">
            <li class="dropdown-item">
               <a href="#">Item-1</a>
            </li>
            <li class="dropdown-item">
               <a href="#">Item-2</a>
            </li>
            <li class="dropdown-item">
               <a href="#">Item-3</a>
            </li>
         </ul>
      </li>
      <li id="subMenu2" class="dropdown-item dropdown-submenu">
         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Submenu-2</a>
         <ul id="dropdownmenu2" class="dropdown-menu subUL">
            <li class="dropdown-item">
               <a href="#">Item-1</a>
            </li>
            <li class="dropdown-item">
               <a href="#">Item-2</a>
            </li>
            <li class="dropdown-item">
               <a href="#">Item-3</a>
            </li>
         </ul>
      </li>
   </ul>
</li>

Updated JQuery script

$('.dropdown-submenu > a').on("click", function(e) {
        var submenu = $(this);
        var parentLI = submenu.parent().attr('id');
        var currentlyShowing = $('.subUL.show').parent().attr('id');
        if(parentLI == currentlyShowing){
            $('.dropdown-submenu .dropdown-menu').removeClass('show');
        } else {
            $('.dropdown-submenu .dropdown-menu').removeClass('show');
            submenu.next('.dropdown-menu').addClass('show');
        }
        e.stopPropagation();
    });

    $('.dropdown').on("hidden.bs.dropdown", function() {
        // hide any open menus when parent closes
        $('.dropdown-menu.show').removeClass('show');
    });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transfer a specific row from a dataTable to another dataTable on a separate php page

Within my programming project, I am working with two tables: table1.php and table2.php In my current setup, I have a script located in table1.php that allows me to pass data to a modal which then passes the data into table2.php. However, I am now facing a ...

phpjqueryhtmlajaxsqlsrv

Chrome and Firefox both have issues with CSS calc functionality

I have a div with an id called #monthlyconfirm_grid. I implemented a jQuery function to control scrolling in a gridview, but it seems to only work in Internet Explorer and not in Chrome or Firefox. $(document).ready(function () { var expi = $ ...

c#jquerycss

Troubleshooting: My Bootstrap collapse navbar refuses to cooperate

Hi there! I'm working on creating a responsive navbar with Bootstrap, but I'm having trouble getting the collapse feature to work. Can someone please assist me? Here are the lines of code I have: <nav class="navbar navbar-expand-md navba ...

htmlbootstrap-4

Using Angular Material to create a sleek scrollbar within a tab containing card content

I require assistance in styling angular material tabs. Please refer to this link for the issue: https://stackblitz.com/edit/angular-6-material-tab-problem?file=app/tab.component.html [Edit: The stackblitz example is working correctly after implementing ...

htmlcssangular-materialscrollbar

Uploading files in chunks: a guide to storing files in Azure blob storage using ng-file-upload

I'm currently developing an Angular application that requires the functionality for users to upload multiple files to an Azure blob storage container using ng-file-upload and HTML5. I've already gone through the documentation provided at https:// ...

angularjshtmlazure-blob-storageng-file-upload

Tips for transferring data from ajax to Django views

I have a set of JSON data that looks like the following: [{"item":"Datalogger","hsn":"123","unit_name":"BAG","unit_price":"100","quantity":"6", "tax_c ...

htmljsonajaxformsdjango-views

The conflict between CSS link types and image links causing disruption

I am currently designing my own Tumblr theme and have encountered an issue that I cannot resolve due to lack of expertise. I was hoping someone with more knowledge could assist me. Essentially, I have implemented a feature where hovering over a link chang ...

htmlcss

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

javascriptcssreactjsreduxmaterial-ui

How can we add styles to text entered into a form input field in a targeted way?

Is there a way to apply styling to the second word entered into a form input text field after the user hits "enter" and the data is output? In this scenario, the text always follows the format of 3 numbers, followed by a space, and then a name. For examp ...

javascriptjqueryhtmlcssforms

AngularJS: Validators in Controller do not directly bind with HTML elements

The in-line validations on the HTML side are functioning properly, but when I utilize functions in my Controller (specifically ingresarNuevoEmpleador and limpiarNuevoEmpleador), the $invalid value is always true. Additionally, $setPristine does not seem to ...

javascripthtmlangularjsvalidation

Utilizing PHP to create a loop that processes two submitted forms

Is my code handling two submit forms in a loop correctly? I am facing an issue with the second form where it redirects to selectedSold.php but does not display any details or retrieve the name="nganga" of the selected row. The first form works fine, so I c ...

phphtmlforms

JavaScript formula for calculating dates together

I'm currently developing a PHP program for generating invoices. I'm implementing a datetimepicker to select the invoice generation date and due date. Now, I need the due date field to be automatically populated by adding a specific value to the i ...

javascriptphpjqueryhtml

What could be the reason behind the link only functioning properly on macOS?

I tried accessing a link that works perfectly on Chrome, Safari, and Firefox on MacOS, but when I try to access it from Windows or Android, I get a 404 error in the browser. Here is an example link: This link is part of an m3u8 file, which can be accesse ...

htmlmacosoperating-system

Should CSS variables be defined within the render method of a React component?

Yesterday, I mistakenly created and deleted a post. Now, I am facing an issue with creating a component that requires specific styling. The problem arises when the componentDidMount() method causes flickering during the rendering process, as it takes some ...

javascripthtmlcssreactjscss-variables

Monitoring the modifications of a linked component in React: A guide

I am facing an issue where I need to store the text of a referenced element in an array. My goal is to first display the text of each paragraph element with the "ebookName" class in the console before storing it in the array. However, I have encountered a ...

javascripthtmlreactjs

What is the term for the color used to highlight selections in CSS?

After discovering the hex values of default selection colors on various systems and learning about setting text or item colors with CSS3 from this insightful answer, I find myself wondering if it is possible to highlight selections in SVG elements using th ...

htmlcsscolors

What is the best way to create a responsive layout using bootstrap or HTML and CSS without relying on JavaScript?

Explaining the issue in words is a bit challenging for me as English is not my first language. Please take a look at the image I have linked below for a better understanding of my problem. https://i.sstatic.net/68zan.jpg Currently, I am utilizing bootstr ...

htmlcssbootstrap-4

Nodemailer is experiencing issues with displaying HTML content correctly

<div style = "height:auto;width:auto; background-color:#5C81F4;display:flex; justify-content:center;"> <div style="display:flex;flex-direction:column; width:90vw;height:auto;overflow:hidden;border-radius:20px; background-color:# ...

htmlcssnode.jsexpressnodemailer

GitHub Pages is experiencing difficulty locating the css and bundle files despite functioning correctly on local servers and a custom domain

Despite working flawlessly locally and on a custom domain, GitHub Pages is struggling to locate css and bundle files. I deploy from a branch. To view the page, click here - GitHubPages page For the project itself, visit this link - HouseLoaderPage In or ...

javascripthtmlcssgithubgithub-pages

Why are columns in Bootstrap 4 Grid not floating?

I have experience with BS 3 but am new to BS 4 and flex; I am having trouble understanding it. I have set up the grid as per the documentation, but the second column is displaying below the first instead of beside it. I have tried adjusting display proper ...

htmlbootstrap-4