New jquery UI destroy menu not quite working

Well jquery 1.9 is here and so is the version 1.10 of the popular jquery UI. It has some nice additions like menus, tooltips, menu bars and so on. However the menu seems a little bit tricky to use when using an element to trigger it.

let’s have this example:

      some actions
      

ok now the style:

   .themenu { display: none }

and finally the javascript:

                    $('.menu-expander').click(function() {
		    	    var self = this;
	    		    $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).menu('destroy'); $(this).css('display',''); $.removeData(this,'uiMenu'); },
		    		    blur: function() {}
		    		});
	    	   });

Calling the destroy will leave the menu object intact in the element’s data array under the name “uiMenu”. So destroying it takes the 3 steps shown in select method above.
You could also just hide it on select using this:

     $('.menu-expander').click(function() {
		    	    var self = this;
                            var mn = $(this).next('ul');
                            if(mn.data('uiMenu') != null) mn.show();
                            else 
	    		        $(this).next('ul').menu({ 
		    		    position: { my: "left top", at: "right-5 top+5" },
		    		    create: function( event, ui ) { $(this).position({my: "left top", at: "left bottom", of: $(self)}); },
		    		    select: function( event, ui) { $(this).hide(); },
		    		    blur: function() {}
		    	        });
	    	   });

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>