jmccole83
8/30/2019 - 11:11 AM

Bootstrap | multi-level dropdown menu

To create a multi-level dropdown in Bootstrap, add the class 'dropdown-toggle' to all <a> tags that have a sub-menu as the next html element within the navigation. For the script to work, the 'ul' element must be the next element after the <a> tag being clicked on by the user.

common.js
content_copyfile_download
$('.dropdown-toggle').on('click', function(e){
  $(this).next('ul').toggle();
  e.stopPropagation();
  e.preventDefault();
});
header.blade.php
content_copyfile_download
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1413">
  <a href="#" id="navbarTherapuetics" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" role="button" class="dropdown-toggle">Therapuetics</a>
  <ul class="sub-menu dropdown-menu container px-5 py-3 show" aria-labelledby="navbarTherapuetics">
  	<li id="menu-item-1278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1278"><a href="#">Therapuetics</a></li>
  	<li id="menu-item-1054" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1054"><a href="#">Affimer technology</a></li>
  	<li id="menu-item-1409" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1409"><a href="#">Pipeline</a></li>
  	<li id="menu-item-1426" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1426"><a href="#">Partnering</a></li>
  	<li id="menu-item-1421" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1421"><a href="#">Custom Affimers</a></li>
  	<li id="menu-item-1427" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-1427"><a href="#">News</a></li>
  </ul>
</li>