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

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

以下是我的代码来生成下拉菜单。

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路由动态追加内容。

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

任何帮助，将不胜感激！

谢谢。

来源

2017-07-25 Niranjan Godbole

试试这个

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

来源

2017-07-25 06:30:02 fahad

谢谢法赫德。我可以知道上面代码中的enterElementClassName是什么吗？此外，我应该在app.js上面写代码吗？ –

很棒（'#ProfileDropdown'） – fahad

谢谢fahad。现在，每当我点击页面事件的任何地方正在发射。我可以知道如何关闭上面的dropodwn吗？ –

对于角做，Remove/Add Class in Angular 您可以使用$ 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标记的主要包装的事件并删除附加在div中的类。要删除/关闭的元/类是不同的背景和超出范围的这个问题，对于您可以参考This Link Here

希望帮助，

感谢&问候

Shohil Sethia

来源

2017-07-25 06:37:37

谢谢Shohil。我正在寻找纯角码。 –

喜@NiranjanGodbole 检查答案现在，已经更新了它的角度，你可以参考给定的链接，你可以在角上拆下类以及任何CSS添加到它像** **淡出或他人等希望它有帮助，关心 –

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

回答

相关问题