Question

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

Plunker Example -- Dynamic Menu Creation with issues

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

enter image description here



    $(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

主要问题是在菜单的click处理程序中设置位置（请参阅replaceMenuHandler）并不是一件好事。一旦我从click处理程序中删除了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);

});

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

......然后它看起来会很好！

JQueryui菜单将无法正确定位

2 个答案: