jQuery clickMenu calls parent list item on click
I'm using the clickMenu plugin for jQuery, from here:
http://p.sohei.org/jquery-plugins/clickmenu/
My page is at
http://www.freesitesatxdm.co.uk/selectfoods/
I've created a pull down menu, which I'm using as a replacement for a 'select' element. You should be able to select a top level category or a sub-category. The problem is when I click a sub-category, it first registers the click on the sub-category, then it registers a click on the parent. This means the value of the menu is always set to one of the parents.
Here is the code that initiates the menu and sets the click function. If I return false at the end of the onClick function, it will select the right element but not close the menu.
Is there a way to close the menu? I can't find a way to get hold of the clickMenu object.
-
$(document).ready(function()
{
$.fn.clickMenu.setDefaults({
arrowSrc: 'media/clickmenu-arrow-right.gif',
subDelay: 150,
onClick: function() {
// set ID in hidden field
var li_id = $(this).attr('id');
var cat_id = li_id.substring(5);
$('#cat_id').val( cat_id );
// set category name on selected option
var cat_name = $(this).find('>span.cat_name').text();
$('span#cat_selected').text( cat_name );
}
})
$('#cat_menu').clickMenu();
});