accordion failed

[mbasil]

Hi, i’m going to use this script for a mobile version website. I set up this as sm-vertical with collapsed setting. Everything seems to work well except the accordion. User can open 2 or more submenus at the same time. How to restrict this?

Thanks in advance

[admin]

The old v0.9.x releases used to work like an accordion in collapsible mode but, based on user feedback and UX testing (proving, for example, that it is sometimes not appropriate to auto collapse other branches since the active item might be scrolled out of view), this was changed in v1.0. Now sub menus can only be collapsed manually or when the whole tree is reset on click/tap elsewhere on the page.

You could, however, bring back the accordion behavior if you like, by adding the following API tweak on your page:

$(function() {
	$('#main-menu').bind('click.smapi', function(e, item) {
		var obj = $(this).data('smartmenus');
		if (obj.isCollapsible()) {
			var $item = $(item),
				$sub = $item.dataSM('sub');
			if ($sub && !$sub.is(':visible')) {
				obj.itemActivate($item, true);
				return false;
			}
		}
	});
});

Let me know if you have any troubles.

[mbasil]

I am using code for having links on each li. Comparing the code you wrote found that the misfuction was at obj.itemActivate($item); By adding the true flag works fine!

So my code is:

var $mainMenu = $('#main-menu').on('click', 'span.sub-arrow', function(e) {
		// toggle the sub menu on sub arrow click in collapsible mode
		var obj = $mainMenu.data('smartmenus');
		if (obj.isCollapsible()) {
			var $item = $(this).parent(),
				$sub = $item.parent().dataSM('sub'),
				subIsVisible = $sub.dataSM('shown-before') && $sub.is(':visible');
			$sub.dataSM('arrowClicked', true);
			//$('#main-menu').smartmenus('menuHideAll');
			obj.itemActivate($item,true);
			if (subIsVisible) {
				obj.menuHide($sub);
			}
			
			e.stopPropagation();
			e.preventDefault();
		}
	}).bind({
		// don't show the sub menu in collapsible mode unless the sub arrow is clicked
		'beforeshow.smapi': function(e, menu) {
			var obj = $mainMenu.data('smartmenus');
			if (obj.isCollapsible()) {
				var $menu = $(menu);
				if (!$menu.dataSM('arrowClicked')) {
					return false;
				}
				$menu.removeDataSM('arrowClicked');
			}
		},
		'show.smapi': function(e, menu) {
			$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
		},
		'hide.smapi': function(e, menu) {
			$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
		}
)};

Thanks very much for your time

[admin]

Hmm, actually, in v1.0 that code is not needed – I guess you’ve copied it from some old v0.9 thread. It was needed just in v0.9 to make it behave like v1.0 behaves by default. So what you need in v1.0 to bring back the accordion behavior is just the code sample I posted above.

[Author]

Posts