Close a dropdown completely before open another one

Question

I'm building a dropdown menu and need to add the following functionality to it:

When one dropdown is open and you open another one the previous one needs to close completely before the new one starts to open no matter how fast or slow the dropdown speed is set to.

Click to see DEMO

JQuery

$(document).ready(function() {

$(".click").on("click", function(evt) {
   evt.stopPropagation();
  var th = $(this);

  if (th.hasClass("active")) {
    th.removeClass("active");
   th.parent().find(".showup").slideUp(900);
   $(".main-container").removeClass("black-bg");
  }else{
    $(".active").removeClass("active");
    $(".showup").slideUp(900);
    $(".main-container").removeClass("black-bg");
    setTimeout(function(){
    th.addClass("active");
    th.parent().find(".showup").slideDown(900);
$(".main-container").addClass("black-bg");
    },250);

  }

});
$(".showup").on("click", function(evt) {
    evt.stopPropagation();
});

});

$(document).on("click", function() {
    $(".active").parent().find(".showup").slideUp(900);
    $(".active").toggleClass("active");
    if ($(".main-container").hasClass("black-bg")) {
      $(".main-container").toggleClass("black-bg");
    }
});

Thank you for your help.

Muhammad Omer Aslam · Accepted Answer

You need to use .stop(clearQueue,jumpToEnd) along with the second parameter for the slideUp() and slideDown() i.e complete callback function to call once the animation is complete, called once per matched element.

you should first hide all open and then call the slideDown inside the complete callback of the slideUp so that once the opened menu is completely closed then the new drop-down should be opened.

Notice the 2 parameters passed to the stop() so that when you click simultaneously the animation should not keep on playing instead skips to the last state either shown or hidden

See a demo below.

$(document).ready(function() {
  $(".click").on("click", function(e) {
    var menu = $(this);
    toggleDropDown(menu);
  });

  $(document).on('mouseup',function(e) {
    var container = $("nav");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
        $(".main-container").removeClass("black-bg");
        if ($('a.active').hasClass('active')) {
          $('a.active').removeClass('active');
        }
      });
    }
  });

});


function toggleDropDown(menu) {
  var isActive = $('a.active').length;
  $('a.active').parent().find('.showup').stop(true, true).slideUp(500, function() {
    $(".main-container").removeClass("black-bg");
    if (menu.hasClass('active')) {
      menu.removeClass('active');
    } else {
      $('a.active').removeClass('active');
      menu.addClass('active');
      menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
        $(".main-container").addClass("black-bg");
      });
    }
  });
  if (!isActive) {
    menu.addClass('active');
    menu.parent().find('.showup').stop(true, true).slideDown(500, function() {
      $(".main-container").addClass("black-bg");
    });
  }

}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 12px;
  font-family: Arial;
}

.nav-wrapper {
  width: 100%;
  overflow: hidden;
  background: #424242;
}

nav {
  width: 100%;
  margin: auto;
  overflow: hidden;
  background: #424242;
}

.nav-content {
  width: 100%;
  z-index: 999;
  background: #ccc;
}

.top-bar-section {
  float: right;
}

.top-bar-section a.active {
  background: #c8c8c8;
  color: #000;
}

.showup {
  display: none;
  background: #ccc;
  position: absolute;
  width: 100%;
  top: 50px;
  left: 0;
  z-index: 99;
  padding: 30px 15px 30px 20px;
}

p {
  font-size: 14px;
  line-height: 1.4;
}

li.nav-item {
  display: inline-block;
  background: #f5f5f5;
}

li.nav-item a {
  display: block;
  text-decoration: none;
  padding: 10px;
}

.main-container {
  width: 80%;
  height: 400px;
  margin: auto;
}

.black-bg {
  background: #000;
}



  
    
      
        
          Nav item 1
          
            
              
                Dropdown for Nav Item 1.
              
            
          
        
        
          Nav item 2
          
            
              
                Dropdown for Nav Item 2.
              
            
          
        
        
          Nav item 3
          
            
              
                Dropdown for Nav Item 3.
              
            
          
        
        
          Nav item 4
          
            
              
                Dropdown for Nav Item 4.

Close a dropdown completely before open another one

Answers (2)

Related Questions