accordion failed

Home Forums Older releases 1.0.x accordion failed

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2658
    mbasil
    Participant

    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

    #2660
    admin
    Keymaster

    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.

    #2664
    mbasil
    Participant

    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

    #2667
    admin
    Keymaster

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?