如何在没有提交按钮的情况下显示“下拉菜单”？

Question

我只想在单击小按钮后为元素创建和显示菜单。

我有一个小按钮，运行功能“ doAction”

<i class="fa fa-ellipsis-h" ng-click="doAction(\'OpenMenu\', $event)"></i>

在我的函数“ doAction”中，想要从事件鼠标单击中获取位置XY，并在此位置显示我的菜单。 几乎所有东西都可以工作...我对“下拉菜单”有疑问。 更准确地说，我看到上面描述的按钮和此代码中的按钮（id = test）：

 var menu = angular.element('<div class="dropdown">' +
                '<button id="test" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><span class="caret"></span></button>'+
                '<ul class="dropdown-menu">'+
                '<li><a href="#">HTML</a></li>'+
                '<li><a href="#">CSS</a></li>'+
                '<li><a href="#">JavaScript</a></li>'+
                '</ul>'+
                '</div>');

            menu.css({
                position: 'absolute',
                left: event.clientX,
                top: event.clientY,
                zIndex: '999'
            });

            var body = angular.element(document).find('body').eq(0);
            body.append(menu);

现在，我必须单击第一个按钮“ fa-ellipsis-h”，然后单击“测试”按钮，然后我才能看到我的菜单。 我不知道如何在按下第一个按钮“ fa fa-ellipsis-h”后立即从变量“菜单”中删除按钮“ id = test”并打开菜单。

Answer 1

首先，确定要在函数中转义那些单引号吗？ 我将HTML复制并粘贴到jsbin中，由于这个原因，它立即失败了。

如果我了解您的要求，则希望您的菜单在第一次单击后打开，而不是在单击<i>元素后再单击“测试”按钮后打开。

在这里，它对我<i class="fa fa-ellipsis-h" data-ng-click="doAction('OpenMenu', $event)">Menu</i> ： 工作示例 <i class="fa fa-ellipsis-h" data-ng-click="doAction('OpenMenu', $event)">Menu</i>

单击立即打开菜单（我为那些元素添加了一些文本，因为我没有包含fontawesome库）。