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-routing 动态添加内容。

我可以帮助解决这个问题吗？

任何帮助将不胜感激！

谢谢。

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

以角度方式进行，Remove/Add Class in Angular 您可以使用 $ scope.class 方法从网页中删除下拉类隐藏/删除。

OR

在 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标记的主要包装触发事件，并删除附加的类 div 。 删除/关闭 元素/类是不同的上下文，超出此问题的范围，为此您可以参考This Link Here

希望有所帮助，

谢谢＆amp;此致

Shohil Sethia

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

2 个答案: