单击页面中的任何位置时如何关闭下拉菜单？

Question

嗨，我正在用angularjs开发SPA。 成功登录用户后，我将在右上角设置一个下拉菜单。 每当我们单击下拉菜单时，就会扩展。 我想在用户单击页面中的任何位置时关闭该下拉列表。

以下是我的生成下拉列表的代码。

 var id = document.getElementById('ProfileDropdown');
        id.innerHTML = $scope.ProfileDropdown = '  <div data-drop-down>' + ' <ul>' +
                '<li ><a ui-sref="Dashboard.Userprofile">User Profile</a></li>' +
            '<li><a ui-sref="Dashboard.changepassword">Change Password</a></li>' +
              '<li><a ui-sref="Dashboard.LeaseListings">Lease Request</a></li>' +
                 '<li><a ui-sref="#">Service Request</a></li>' +
                   '<li><a ui-sref="Dashboard.NewServiceRequest">New Service Request</a></li>' +
           ' <li ng-click="logout()">Logout</li>' +
        '</ul>' + '</div>';
        $compile(id)($scope);

我正在努力寻找应该采取哪些措施，以在用户单击页面中的其他位置时关闭 下拉菜单 ？

这是SPA，所以我只有一个html页面。 在其他情况下，我将使用ui路由来动态附加内容。

我可以得到一些帮助来解决这个问题吗？

任何帮助，将不胜感激 ！

谢谢。

Answer 1

尝试这个

   $document.click((e) => {
    let element = angular.element('.enterElementClassName')
     if (!element.is(e.target) && element.has(e.target).length === 0)      {
        // close popup condition
    }
    });

Answer 2

对于角做， 删除/添加类的角可以使用$ scope.class方法做删除下拉的类隐藏/从网页中删除 。

要么

在Javascript / JQuery中

基于一些假设，可以有几种关闭下拉菜单的解决方案：假设您有一些描述下拉菜单的元素类，例如：

var id = document.getElementById('ProfileDropdown');
        id.innerHTML = $scope.ProfileDropdown = '  <div data-drop-down class="dropdown_menu">' + ' <ul>' +
                '<li ><a ui-sref="Dashboard.Userprofile">User Profile</a></li>' +
            '<li><a ui-sref="Dashboard.changepassword">Change Password</a></li>' +
              '<li><a ui-sref="Dashboard.LeaseListings">Lease Request</a></li>' +
                 '<li><a ui-sref="#">Service Request</a></li>' +
                   '<li><a ui-sref="Dashboard.NewServiceRequest">New Service Request</a></li>' +
           ' <li ng-click="logout()">Logout</li>' +
        '</ul>' + '</div>';
        $compile(id)($scope);

现在，要关闭该下拉列表，您可以触发一个以 HTML标记的主 包装为目标的Event ，并删除div中附加的类。 要删除/关闭 元素/类是不同的上下文并且不在此问题的范围内，为此，您可以参考此链接

希望能有所帮助，

感谢和问候

肖希尔·塞提亚