javascript - JQueryui 菜单无法正确定位

Question

我正在尝试使用 JQueryUI 菜单小部件动态创建菜单。

Plunker Example -- Dynamic Menu Creation with issues

问题是菜单没有准确地定位自己。它(菜单)似乎决定总是出现在我的 html 正文的底部附近第一次单击菜单按钮时，单击处理程序，只有第二次单击菜单按钮处理程序时，它才会出现在适当的位置，位于菜单按钮的底部。那么，如何让我的菜单忠实于我想要的菜单按钮呢？

    $(document).ready(function(){
      $("#myTabs").tabs();

      var $replaceMenu=$("<ul style='position:absolute;z-index:9999;'>" + 
        "<li><a href='#'>Replace Current</li>" + 
        "<li><a href='#'>Replace All</li>"  +
        "</ul>").menu();

        var replaceMenuHandler=function(event){
            $replaceMenu.position({
                my: "left top",
                at: "left bottom",
                of: this
              })
              .on( "menuselect", function( event, ui ) {
                var selectedReplaceOption=ui.item.text();
                console.log(selectedReplaceOption);
                $replaceMenu.hide();
              }).show();
              event.stopPropagation();
        };

        $replaceMenu.appendTo("#testMenu").hide();
        $("#testMenu").on("click",replaceMenuHandler);

    });

Answer 1

主要问题是在菜单的单击处理程序中设置位置(请参阅replaceMenuHandler)并不是一件好事。一旦我从点击处理程序中删除了 menu.position 调用，并且仅在最初创建菜单时调用它，代码就开始按我的预期工作。

Updated Plunker

$(document).ready(function(){
  $("#myTabs").tabs();

  var $replaceMenu=$(
    "<ul style='position:absolute;z-index:9999;'>" + 
      "<li><a href='#'>Replace Current</a></li>" +
      "<li><a href='#'>Replace All</a></li>" +
    "</ul>")
        .menu()
        .appendTo("body")
        .position({
            my: "left top",
            at: "left bottom",
            of: "#testMenu"
          })
      .on( "menuselect", function( event, ui ) {
            var selectedReplaceOption=ui.item.text();
            console.log(selectedReplaceOption);
            $replaceMenu.hide();
          });

    var replaceMenuHandler=function(event){
        $replaceMenu.show();
    };

    $("#testMenu").on("click",replaceMenuHandler);

});