Open Current SubMenu; Toggle on Hover

open-current-submenu-toggle-on-hover.js

/**
 * WordPress menu
 * 
 * Opens the current page's submenu. When hovering over another top-level
 * menu item, it closes the open submenu and opens the other.
 *
 * Only operates if the current menu item is defined, so it won't do
 * anything on pages that don't have a submenu or don't have a 
 * current menu item (ie. if you don't have a "Home" menu item and submenu, 
 * it won't do anything on the home page).
 */

( function( $ ) {
	
	var menu, menuitems, current;

	menu = $( '.nav-menu' ); // class name of the top-level menu UL
	menuitems = menu.children( 'li' ); // the top-level children
	current = menu.children( '.current-menu-parent' )[0]; // the current top-level parent item

	if ( 'undefined' === typeof current ) {

		current = menu.find( 'current-menu-item' )[0]; // the current top-level menu item

	}

    /**
     * Only work if the current variable is defined
     */
	if ( 'undefined' === typeof current ) { return; }

        /**
         * If current doesn't already have it, add the "open" class to display the submenu
         */
	$( function() {

		if ( ! $(current).hasClass( 'open' ) ) {

			$(current).addClass( 'open' );

		}

	});

        /**
         * If another top-level menu item is hovered over, close the current 
         * submenu and display the hovered submenu
         */
	menuitems.each( function() {

		var item = $(this);

		item.hover( function() {

			$(current).toggleClass( 'open' );
			item.toggleClass( 'open' );

		});
	});
	
} )( jQuery );