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

Question

目标：

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

示例：

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

在上面的 bootsnip 演示中，如果第 3 级的第一个链接被点击，我想说的是：

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

当前方向：

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

---

提前谢谢你:)

Answer 1

我复制了 sn-p 并进行了以下编辑：

• 添加了一个可收集的数组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>