jay stephens jay stephens - 3 months ago 10
CSS Question

Removing .slideDown animation from a dropdown if another dropdown was just clicked

I wasn't entirely sure how to word the question, but I currently have a dropdown which uses jquery toggleSlide, It works fine but If I'm clicking through the dropdown buttons, the animation plays one after another (As expected) I was wondering if there was a way to deactivate the slideToggle to just .show if another dropdown just played the slideDown animation.

The jquery I use for each dropdown

$(function() {

// Dropdown toggle
$('.menu1Container').click(function(){
$(this).next('#menu1Dropdown').slideToggle(90);
});

$(document).click(function(e) {
var target = e.target;
if (!$(target).is('.menu1') && !$(target).parents().is('.menu1')) {
$('#menu1Dropdown').slideUp(90);
}
});

});


https://jsfiddle.net/9j3k61rg/ Hopefully this gives you an idea of what I'm talking about, theverge.com dropdown shows exactly what I mean.

Thanks

Answer

You can hide the other menu.

Add hide() method to the following functions. It cancels all animations.

// Dropdown toggle
$('.menu2Container').click(function(){
  $(this).next('#menu2Dropdown').slideToggle(1000);
  $('#menu1Dropdown').hide();
});

New fiddle https://jsfiddle.net/9j3k61rg/1/