CODEWITHSUNDEEP
javascriptjqueryhtmlcss
saruftw
saruftw

Reputation: 1164

Removing class on one div when other is clicked

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 ?

Upvotes: 0

Views: 62

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

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

Note: I think you may need to event.stopPropagation() while you trying to click on .dropdown-menu itself

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

Upvotes: 2

Denny Vaval&#224;
Denny Vaval&#224;

Reputation: 61

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

Upvotes: -1

Related Questions