jquery - 上下文菜单不显示子菜单

Question

在此plunk我有一个菜单，当您单击 Canvas 时会显示该菜单。将鼠标悬停在“聚合”菜单项上时，右侧会显示第二个子菜单。

问题是，如果您从“聚合”中“鼠标移出”然后再次进入，则子菜单的位置不再是它应该在的位置。这段代码有什么问题？

HTML

  <div id="canvas" style="width:400px;height:400px;background-color:#ff33ff;"></div>

    <div id="menu1" class="context-menu">
      <ul>
        <li>
          <a href="javascript:void(0);">Display</a>
        </li>
        <li id="li1">
          <a href="javascript:void(0);">Aggregate</a>
        </li>
        <li id="li2">
          <a href="javascript:void(0);">Order by</a>
        </li>
        <li>
          <a href="javascript:void(0);">Group by</a>
        </li>
      </ul>
    </div>

    <div id="menu2" class="context-menu">
      <ul>
        <li>
          <a href="javascript:void(0);">Count</a>
        </li>
        <li>
          <a href="javascript:void(0);">Sum</a>
        </li>
        <li>
          <a href="javascript:void(0);">Average</a>
        </li>
      </ul>
    </div>

Javascript

$('#canvas').click(function(e) {

    var top = e.pageY;
    var left = e.pageX;

    $("#menu1").show();
    $("#menu1").offset({ top: top, left: left });

    $('#li1').mouseenter(function() {
          $("#menu2").offset({ top: top+20, left: left+120 });
            $("#menu2").show();
    });

    $('#li1').mouseleave(function() {
        $("#menu2").hide();
    });

    $('#menu2').mouseenter(function() {
            $("#menu2").show();
    });

    $('#menu2').mouseleave(function() {
            $("#menu2").hide();
    });

});

CSS

.context-menu {
  border:1px solid rgba(0,0,0,.15);
  background-color:#ffffff;
  padding:6px 0 0 0;
  display:none;
}
.context-menu ul {
  padding:0;
  list-style:none;
}
.context-menu li {
  background-color:#ffffff;
}
.context-menu li:hover {
  background-color:rgb(248,248,248);
}
.context-menu a {
  color:#333;
  text-decoration: none;
  line-height:24px;
  margin-left:20px;
}
#menu1{
  position:absolute;
  width:140px;
}
#menu2{
  position:absolute;
  width:100px;
}

Answer 1

尝试用 css 替换 offset。

我认为每次在 mouseenter 上调用 offset 时，它都会添加到该菜单的当前位置。

使用 css 方法将设置顶部和左侧位置，而不是添加到当前位置。