Question: Following is my HTML,

```
 <div class="container">
  <ul class="navbar">
    <li class="nb-link"><a>Home</a></li>

    <li class="dropdown">
      <a>CBSE</a>
      <ul class="dropdown-menu">
        <li>10th Standard</li>
        <li>12th Standard</li>
      </ul>
    </li>

    <li class="dropdown">
      <a>Engineering</a>
      <ul class="dropdown-menu">
        <li>JEE - Main</li>
        <li>JEE - Advanced</li>
      </ul>
    </li>
  </ul>

```

I have 2 dropdowns . When I click one, it comes down. But when I click another, even that comes down without closing the previous one . This creates an overlap. The way I'm handling this using JS is as follows 

```
 $(document).ready(function() {
    $('.dropdown').click(function() {
        var $this = $(this);

      if ($this.children('.dropdown-menu').hasClass('open')) {
        $this.removeClass('active');
        $('.navbar').$this.children('.dropdown-menu').removeClass('open');
        $this.children('.dropdown-menu').fadeOut("fast");
      } 

        else {
          $this.addClass('active');
          $this.children('.dropdown-menu').addClass('open');
          $this.children('.dropdown-menu').fadeIn("fast");
        }

    });

});

```

How can I achieve a functionality using JS such that the previous dropdown closes when I click a new dropdown ? Also, the dropdowns should close when anywhere on the page is clicked ?

Answer: 
can try this

```
$(document).ready(function() {
    $('.dropdown').click(function() {
        var $this = $(this);
        $('.dropdown').not($this).removeClass('active')
        $('.dropdown-menu').not($this.find('.dropdown-menu')).removeClass('open');
        $this.toggleClass('active');
        $this.find('.dropdown-menu').toggleClass('open');
    });
});

```

[**Working Demo**](https://jsfiddle.net/mohamedyousef1980/50sjx6xo/1/)

this is a function you can use if selectors is not target 

```
// function for if selectors not target
function actionwindowclick(e , selector , action){
            if (!$(selector).is(e.target) // if the target of the click isn't the container...
                && $(selector).has(e.target).length === 0) // ... nor a descendant of the container
            {
            action();
        }
}

```

and you can use it in window click event like this

```
$(window).on('click', function(e){
     actionwindowclick(e , ".dropdown , .dropdown-menu" , function(){
         $('.dropdown').removeClass('active')
         $('.dropdown-menu').removeClass('open');
     });
});

```

[**Working Demo**](https://jsfiddle.net/mohamedyousef1980/50sjx6xo/4/)

> 
> Note: I think you may need to
>  [**event.stopPropagation()**](https://api.jquery.com/event.stoppropagation/)
>  while you trying to click on .dropdown-menu itself
> 
> 
> 

```
$('.dropdown-menu').click(function(e) {
   e.stopPropagation()
});

```
Try:  

`$(document).ready(function() {  

 $('.dropdown').click(function() {  

 var $this = $(this);  

 $this.children('.dropdown-menu').toggleClass('open');  

 if ($this.children('.dropdown-menu').hasClass('open')) {  

 $this.removeClass('active');  

 $this.children('.dropdown-menu').fadeOut("fast");  

 }  

 else {  

 $this.addClass('active');  

 $this.children('.dropdown-menu').fadeIn("fast");  

 }  

 });  

 });`