Question

在这个plunk中，当你点击画布时我会看到一个菜单。将鼠标悬停在＆＃34; Aggregate＆＃34;菜单项，右侧显示第二个子菜单。

问题在于，如果你＆＃34;鼠标移出＆＃34;来自＆＃34;聚合＆＃34;然后再次输入，子菜单的位置不再是它应该的位置。这段代码有什么问题？

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

尝试将offset替换为css。

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

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

Answer 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

上下文菜单不显示子菜单

2 个答案: