javascript - JQueryui 菜单将无法正确定位

Question

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

Plunker 示例——有问题的动态菜单创建

问题是菜单没有忠实地定位自己。在第一次单击菜单按钮单击处理程序时，它（菜单）似乎始终出现在我的 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 调用，并且仅在我最初制作菜单时调用它，代码就会开始按我的意图工作。

更新的 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);

});

Answer 2

您可能只需要设置样式<button id="testMenu">并将其设置为position: relative;

所以在你的 CSS 中使用类似的东西：

#testMenu {
    position: relative;
}

您的 .ui-menu .ui-menu-item a 还需要：

.ui-menu .ui-menu-item a {
    white-space: nowrap;
    text-align: left;
}

...然后它会很好看！