跟踪导致多级下拉菜单打开的操作

Question

目标：

在多级下拉列表中跟踪达到某个级别所需的所有操作。

例子：

像https://s.bootsnipp.com/iframe/xr4GW这样的多级下拉菜单，可以通过将鼠标悬停在其上打开。 一旦在下拉菜单上单击了一个菜单项，如何确定是什么 hover 操作导致菜单的该部分被打开？

在上面的 bootsnip 演示中，如果点击第 3 级中的第一个链接，我希望能够这样说：

• 第 1 层的第 3 个链接
• --> 2级中的第二个链接，导致能够
• ----> 点击第 3 层的第一个链接

当前方向：

目前我正在使用mouseover和click事件来查看我是否可以以某种方式将所有事件关联在一起。 但目前还没有运气。

---

先感谢您：）

Answer 1

我复制了片段并进行了以下编辑：

• 添加了一个可收集的数组path ，其中将指示路径的选定元素
• 添加了监听.dropdown-submenu元素的mouseover和mouseout事件
• 添加了path数组的渲染，以便能够观察其变化

 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>