上下文菜单不显示子菜单答案

【问题标题】：Context menu not showing submenu上下文菜单不显示子菜单
【发布时间】：2016-07-07 01:13:45
【问题描述】：

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

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

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;
}

【问题讨论】：

您尝试做的很多事情都可以通过 CSS 实现。无需将 JS 用于悬停状态 (mouse[enter|leave])。虽然不是一个完美的例子，但我做了一个quick example。
谢谢，我最终实现了你的想法。

标签： jquery html css

【解决方案1】：

尝试将offset 替换为css。

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

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

【讨论】：

【解决方案2】：

将此行$("#menu2").offset({ top: top+20, left: left+120 }); 放在mouseenter 函数之外以避免在每次鼠标进入时执行。

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

$("#menu2").offset({ top: top+20, left: left+120 });

Fiddle

【讨论】：

谢谢，这有帮助，但是如果我再次单击画布并更改菜单的位置，子菜单将无法正确显示
我知道......正在努力......但另一个答案是你的解决方案;）我赞成@Mr。 Meeseeks...