Track the actions that led to a multi-level drop down menu to open

Question

Goal:

Track all the actions required to reach a certain level in a multi-level dropdown.

Example:

A multi-level dropdown like https://s.bootsnipp.com/iframe/xr4GW which can be opened by hovering on it. Once a menu item is clicked on the dropdown, how can one figure out what hover actions led to that part of the menu being opened?

In the above bootsnip demo, if the first link in level 3 is clicked on, I want to be able to say that:

• 3rd link in level 1
• --> 2nd link in level 2, resulted in being able to
• ----> click the 1st link in level 3

Current direction:

Currently I'm using mouseover and click events to see if I can some-how co-relate all the events together. But no luck as of yet.

---

Thank you in advance:)

Answer 1

I copied the snippet and made the following edits:

• added a collectable array path , in which the selected elements of the path will be indicated
• added listening for mouseover and mouseout events for .dropdown-submenu elements
• added rendering of the path array to be able to observe its changes

 var path = [] $(".btn-group, .dropdown").hover( function() { $('>.dropdown-menu', this).stop(true, true).fadeIn("fast"); $(this).addClass('open'); path.push($(this).children('a').text().trim()); renderDebug(); }, function() { $('>.dropdown-menu', this).stop(true, true).fadeOut("fast"); $(this).removeClass('open'); path.pop(); renderDebug(); } ); $(".dropdown-submenu").on("mouseover", function () { path.push($(this).children('a').text().trim()); renderDebug(); }).on("mouseout", function () { path.pop(); renderDebug(); }); const $debug = $("#debug"); function renderDebug () { $debug.text(JSON.stringify(path, null, 2)); }

 .dropdown-submenu { position: relative; }.dropdown-submenu>a:after { content: ">"; float: right; }.dropdown-submenu>.dropdown-menu { top: 0; left: 100%; margin-top: 0px; margin-left: 0px; }.dropdown-submenu:hover>.dropdown-menu { display: block; }

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="card my-3"> <div class="card-header"> Bootstrap 4 Multilevel Dropdown Hover <div class="options float-right"> <a class="settings"><i class="fa fa-cog"></i></a> <a href="#" class="collapse"><i class="fa fa-chevron-up"></i></a> <a href="#" class="reload"><i class="fa fa-refresh"></i></a> <a href="#" class="fullscreen"><i class=" fa fa-expand"></i></a> <a href="#" class="remove"><i class="fa fa-times"></i></a> </div> </div> <div class="card-body"> <div class="row"> <div class="col-lg-12"> <div class="btn-group"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href=""> Dropdown </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li><a class="dropdown-item" href="#">level 1</a></li> <li><a class="dropdown-item" href="#">level 1</a></li> <li class="dropdown-divider"></li> <li class="dropdown-submenu"> <a class="dropdown-item" tabindex="-1" href="#"> level 1 </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" tabindex="-1" href="#">level 2</a></li> <li class="dropdown-submenu"> <a class="dropdown-item" href="#"> level 2 </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">3rd level</a></li> <li><a class="dropdown-item" href="#">3rd level</a></li> </ul> </li> <li><a class="dropdown-item" href="#">level 2</a></li> <li><a class="dropdown-item" href="#">level 2</a></li> </ul> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <pre id="debug"></pre>