0

Looking to add stopPropogation to the following dropdown menu.

$(document).ready(function() {$('.js nav #nav-ads').toggle(
function() { 
    $('.dropdown-js').fadeIn();
    $('.js nav #nav-ads span').toggleClass('arrow-up').toggleClass('arrow-down');
},
function() { 
    $('.dropdown-js').fadeOut();
    $('.js nav #nav-ads span').toggleClass('arrow-down').toggleClass('arrow-up');
}
);

});

Michele d'Amico
  • 22,111
  • 8
  • 69
  • 76
Danny
  • 51
  • 8

1 Answers1

0

Note: This method signature was deprecated in jQuery 1.8 and removed in jQuery 1.9. jQuery also provides an animation method named .toggle() that toggles the visibility of elements. Whether the animation or the event method is fired depends on the set of arguments passed. jQuery API

Modern Solution

$('.js nav #nav-ads').on('click', function (e) {
    $('.dropdown-js').fadeToggle();
    $('.js nav #nav-ads span').toggleClass('arrow-up arrow-down');
    e.stopPropagation();
});
Travis Clarke
  • 5,951
  • 6
  • 29
  • 36
  • @user4413288 Yep, that'll work too. I just used the `toggleClass` shortcut for multiple classes. – Travis Clarke Mar 17 '15 at 22:48
  • Will the following method work too? Is this method deprecated as well? or is it ok? `$(document).ready(function() {$('.js nav #nav-ads').click( function() { $('.dropdown-js').fadeToggle(); $('.js nav #nav-ads span').toggleClass('arrow-up').toggleClass('arrow-down'); } ); });` – Danny Mar 17 '15 at 22:53
  • @user4413288 `.on` is the preferred by me, but both `.click` and `.on` will work [More info on the two](http://stackoverflow.com/a/11878976/4279440) – Travis Clarke Mar 17 '15 at 22:57
  • Thanks. Not sure if this is outside of scope, but is there a code to get the dropdown menu to close when clicking anywhere outside the dropdown menu? – Danny Mar 17 '15 at 23:06
  • @user4413288 Maybe a `mouseover` or css `hover` is what you are looking for. It would be more user friendly. – Travis Clarke Mar 17 '15 at 23:26
  • That fiddle is helpful. Is there a way for it to also work in touch devices? I.e., when user touches outside of drop down, drop down goes away – Danny Mar 18 '15 at 01:24
  • @user4413288 be sure to check/validate my answer if it was of any help. – Travis Clarke Mar 18 '15 at 02:13
  • @user4413288 - This [JSFiddle](http://jsfiddle.net/clarketm/jg7hcabL/1/) will open/close on touch with a fallback of hover for not touch devices. – Travis Clarke Mar 18 '15 at 03:00