How to close drop-down when clicking anywhere in the page?

Question

Hi i am developing SPA in angularjs. On successful user login i am setting one drop-down in the upper right corner. whenever we click drop-down will expand. I want to close that drop-down whenever user clicks anywhere in the page.

Below is my code to generate dropdown.

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

I am struggling in finding out what should be done in order to close the drop down when user clicks elsewhere in page ?

This is SPA so i have one html page. In the rest i am using ui-routing to dynamically append contents.

May i get some help to fix this?

Any help would be appreciated !

Thank you.

score 1 · Answer 1 · answered Jul 25 '17 at 06:30

1

Try this

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

answered Jul 25 '17 at 06:30

fahad

129
1
1
10

Thank you fahad. May i know what is enterElementClassName in the above code? Also should i write above code in app.js? – Niranjan Godbole Jul 25 '17 at 06:32
great ('#ProfileDropdown') – fahad Jul 25 '17 at 06:37
Thank you fahad. Now whenever i click anywhere in page event is firing. May i know how can close above dropodwn? – Niranjan Godbole Jul 25 '17 at 06:42
Remove that class which you add on click of drop-down. – fahad Jul 25 '17 at 07:00
i tried angular.element(document.querySelector("#ProfileDropdown")).removeClass("data-drop-down"); and this is not working. – Niranjan Godbole Jul 25 '17 at 07:03
Can you give me running example on jsFiddle – fahad Jul 25 '17 at 07:12
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/150053/discussion-between-fahad-and-niranjan-godbole). – fahad Jul 25 '17 at 07:15

SHOHIL SETHIA · Answer 2 · 2017-07-25T07:35:03.063

For doing it in angular, Remove/Add Class in Angular You can use $scope.class method to do remove the class of Dropdown to hide/remove it from Web Page.

OR

In Javascript/JQuery

There can be several solutions for closing drop-down, On basis of some assumptions: Assume you have some class of the element which describes dropdown, for Ex:

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

Now To close the dropdown you can fire an Event targeting the main wrapper of your HTML Markup and remove the class which got appended in the div. To remove/close the element/class is different context and out of scope from this question, For that you can refer This Link Here

Hope that helps,

Thanks & Regards

Shohil Sethia

Hi @NiranjanGodbole Check the answer now, Have updated it for angular, You can refer the given link and you can remove class in angular itself and also add any css to it like **fadeOut** or others etc. Hope it helps, Regards — SHOHIL SETHIA, Jul 25 '17 at 07:36

How to close drop-down when clicking anywhere in the page?

2 Answers2