collapsibleBehavior: accordion BUT if link is only # (hash) open the child

[carasmo]

Hello,

This menu is the best there is.

I am using collapsibleBehavior: ‘accordion’ behavior but need to find out if there is a bit of jQuery to add to do the following:

If the parent link is only a # hash, open the children, otherwise if it’s an actual link, go to the link but on the first tap/click, not the second.

[admin]

Hi, could be achieved in different ways but here’s what I came up with at the moment:

1) First use collapsibleBehavior: 'accordion-link' instead.

2) Then use the following additional JS:

// SmartMenus jQuery - for href="#" items, expand sub menu (if available) on first tap
$('#main-menu').on('select.smapi', function(e, item) {
  var obj = $(this).data('smartmenus'),
      $item = $(item);
  if (obj.isCollapsible() && $item.is('[href="#"]')) {
    var $sub = $item.dataSM('sub');
    if ($sub && !$sub.is(':visible')) {
      obj.itemActivate($item, true);
    }
    return false;
  }
});

[carasmo]

That works great!

Here’s the final js to do the following:

-Keep open on current url
-If parent only an # toggle the children and close on click
-If link is a link go to the url

Also checked that the aria labels worked and they do!

You are amazing — thank you so much.

//__ SmartMenus.org args
var $primary_menu = $('.menu-secondary');

//__ keep open on current
$primary_menu.smartmenus( 'itemActivate', $primary_menu.find( 'a.current' ).eq( -1 ) );

/* 
 * if parent is a #, toggle children
 * if parent is a #, toggling the title closes children
 * if parent is a link, go to url on first click
*/
$primary_menu.smartmenus( {
    subMenusMinWidth:    '250px',
    showTimeout:         '300',
    markCurrentItem:     true,
    collapsibleBehavior: 'accordion-link',
    hideOnClick:         false
    
} ).on( 'select.smapi', function( e, item ) {
    
    var obj   = $(this).data( 'smartmenus' ),
        $item = $(item);
        
    if ( obj.isCollapsible() && $item.is('[href="#"]') ) {
        var $sub = $item.dataSM( 'sub' );
        if ( $sub && !$sub.is( ':visible') ) {
            obj.itemActivate( $item, true );
        }
        return false;
    }
} ).bind('click.smapi', function( e, item ) {

    var obj = $( this ).data( 'smartmenus' );
    
    if ( obj.isCollapsible() ) {
        var $sub = $( item ).dataSM( 'sub' );
        if ( $sub && $sub.is( ':visible' ) ) {
            obj.menuHide( $sub );
            return false;
        }
    }
} );

[carasmo]

Okay that code above is wrong for the current open. Needs to come after.

//__ SmartMenus.org args
var $primary_menu = $('.menu-secondary');

/* 
 * if parent is a #, toggle children
 * if parent is a #, toggling the title closes children
 * if parent is a link, go to url on first click
*/
$primary_menu.smartmenus( {
    subMenusMinWidth:    '250px',
    showTimeout:         '300',
    markCurrentItem:     true,
    collapsibleBehavior: 'accordion-link',
    hideOnClick:         false
    
} ).on( 'select.smapi', function( e, item ) {
    
    var obj   = $(this).data( 'smartmenus' ),
        $item = $(item);
        
    if ( obj.isCollapsible() && $item.is('[href="#"]') ) {
        var $sub = $item.dataSM( 'sub' );
        if ( $sub && !$sub.is( ':visible') ) {
            obj.itemActivate( $item, true );
        }
        return false;
    }
} ).bind('click.smapi', function( e, item ) {

    var obj = $( this ).data( 'smartmenus' );
    
    if ( obj.isCollapsible() ) {
        var $sub = $( item ).dataSM( 'sub' );
        if ( $sub && $sub.is( ':visible' ) ) {
            obj.menuHide( $sub );
            return false;
        }
    }
} );
		
//__ keep open on current
$primary_menu.smartmenus( 'itemActivate', $primary_menu.find( 'a.current' ).eq( -1 ) );	

[carasmo]

This is resolved. I can’t find a way to mark it though.

[Author]

Posts