Vittal Das Vittal Das - 5 months ago 10
jQuery Question

angularjs dropdown not closing when another opens

I'm trying to create a custom directive of a dropdown .

Here is my code : https://plnkr.co/edit/YqJ6tz4fwvBRmtmzeCJr

To close the dropdown I'm checking the click event outside of that directive element.

$document.bind('click', function() {
scope.closeDropdown();
});


But the problem with this code is when one dropdown is opened and another one is click the first one doesn't close .

How to close the dropdown when another one is clicked ?
One way I could do this by declaring a varible in the controller and check everytime before opening the dropdown. But in this way this directive can't be use independently .

Any help ?

Answer

One way to do it is:

 scope.toggleCheck = function(item,element){
                scope.closeDropdown();
                if(scope.multiSelect){
                    scope.multiChoice(item);
                }else{
                    scope.singleChoice(item);
                }
            };

or a better waY:

 scope.openDropDown = function () {
                $('.dropdown-list').css('display','none');
                elem.find('.dropdown-list').css('display','block');
            };

https://plnkr.co/edit/zwTjiktY8H3HmHnvQnoa?p=preview