Hi, here is how you could do it (there might be even a bit simpler way to achieve it but this is what came to my mind at the moment).
I think it makes sense to use the sub arrows (SPAN’s) as toggle elements since they are already there for us. You might just need to tweak their style on small screens – i.e. make them bigger and easier to hit, tweak their positions, etc. And then you need just the following additional JS ondomready:
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);
obj.itemActivate($item);
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('+');
}
});
Please let me know if you have any questions.
Cheers!
