jQuery: Novice to Ninja 2nd Ed. jQuery Ver: 1.7.1 vs. 2.1.1 toggle

So far it’s going well, but in Chapter 5 it uses the toggle method for sliding menus up and down. The menus work with 1.7.1 but do not work with 2.1.1. The whole menu is removed. Example Chapter 05, 03_open_closed_indicators (jQuery below). Cannot find anything about what changed on the toggle method. Any ideas would be helpful.
Thanks.

$(document).ready(function(){
$( '#menu > li > ul' )
	.hide()
	.click(function( e ){
		e.stopPropagation();
	});
	
  $('#menu > li').toggle(function(){
	  $(this)
      .css('background-position', 'right -20px')
      .find('ul').slideDown();
  }, function(){
  	$( this )
      .css('background-position', 'right top')
      .find('ul').slideUp();
  });
});

That means you are using an old browser that JQuery 2 doesn’t support.

JQuery 2 was a rewrite of JQuery 1 with antiquated browser support removed. It wasn’t a direct replacement for JQuery 1.

The next version of JQuery 1 after the current 1.11.1 version will be JQuery Compat 3.0.

The next version of JQuery 2 after the current 2.1.1 version will be JQuery 3.0.

This will make it clearer that there are two separate versions and that one isn’t a replacement for the other.

jQuery’s Toggle Event function was removed as part of version 1.9.

https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfntogglehandler-handler-is-deprecated

If you want to make this work with a newer version of jQuery, you just need to recreate the toggle function:

jQuery.fn.toggle = function( fn, fn2 ) {
  // Don't mess with animation or css toggles
  if ( !jQuery.isFunction( fn ) || !jQuery.isFunction( fn2 ) ) {
    return oldToggle.apply( this, arguments );
  }
  // migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");
  // Save reference to arguments for access in closure
  var args = arguments,
  guid = fn.guid || jQuery.guid++,
  i = 0,
  toggler = function( event ) {
    // Figure out which function to execute
    var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
    jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
    // Make sure that clicks stop
    event.preventDefault();
    // and execute the function
    return args[ lastToggle ].apply( this, arguments ) || false;
  };
  // link all the functions, so any of them can unbind this click handler
  toggler.guid = guid;
  while ( i < args.length ) {
    args[ i++ ].guid = guid;
  }
  return this.click( toggler );
};

This was taken from here:

http://stackoverflow.com/questions/14338078/equivalent-of-deprecated-jquery-toggle-event

Here’s a demo of it working correctly with jQuery latest.

Thank you for the sample and explanation. I thought that might be the issue, but being new to jQuery wasn’t sure.

No problem

Since the forums moved to Discourse, we have a like button (the heart next to the reply button).
Feel free to like any posts which have helped you out or which you enjoyed reading.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.