Close menu on click of Options button and outside of container

[Anonymous]

Hello,
Found this link with some code that would work, just do not know how to put it in to action.
http://stackoverflow.com/questions/25135736/does-jquery-mouseup-event-work-on-touch-devices

Thanks for your help.

[Shikkediel]

You have two options here – revert all listeners to clicks (these’ll work on touch devices) or include touch events.

jQuery(document).ready(function($) {

    $('.bbp-admin-links:even').css({position: 'absolute', right: '380px'});

    $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) {
        $(this).next('.bbp_custom_links_submenu').toggle();
        e.preventDefault();
        e.stopPropagation();
    });

    $(document).click(function(e) {
        if (!$(e.target).closest('.bbp_custom_links_submenu').length) {
        $('.bbp_custom_links_submenu').hide();
        }
    });
});

jQuery(document).ready(function($) {

    $('.bbp-admin-links:even').css({position: 'absolute', right: '380px'});

    $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) {
        $(this).next('.bbp_custom_links_submenu').toggle();
        e.preventDefault();
    })
    .on('mouseup touchend', function(e) {
        e.stopPropagation();
    });

    $(document).on('mouseup touchend', function(e) {
        if ($(!(e.target).closest('.bbp_custom_links_submenu').length) {
        $('.bbp_custom_links_submenu').hide();
        }
    });
});

From the top of my head, that is.

[Anonymous]

Hello,
The first one still does not work for mobile devices, the second one does not work at all, there is an error in the code.

<script type="text/javascript">
    jQuery(document).ready(function($) {

    $('.bbp-admin-links:even').css({position: 'absolute', right: '380px'});

    $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) {
        $(this).next('.bbp_custom_links_submenu').toggle();
        e.preventDefault();
    })
    .on('mouseup touchend', function(e) {
        e.stopPropagation();
    });

    $(document).on('mouseup touchend', function(e) {
        if ($(!(e.target).closest('.bbp_custom_links_submenu').length) {
        $('.bbp_custom_links_submenu').hide();
        }
    });
});
</script>

Thanks.

[Anonymous]

Hello,
I currently have the 2nd piece of code in if you want to check on the site.

Thanks for your help.

[Shikkediel]

I made a typo in this line in any case, while shortening the code somewhat :

if ($(!(e.target).closest('.bbp_custom_links_submenu').length) {

Should be :

if (!$(e.target).closest('.bbp_custom_links_submenu').length) {

[Anonymous]

Hello,
You are awesome, now it works for closing it with mobile devices on tap outside of the container.

Thanks for all your help.

[Anonymous]

Hello,
The final code is:

/*Custom BBPress admin links menu*/
function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) {
   if ( is_user_logged_in() ) {
   $menulinks = '<ul id="bbp_custom_links_menu-' . $r["id"] . '" class="bbp_custom_links_menu">';
    $menulinks .= '<li class="parent"><a href="#bbp_custom_links_menu-' . $r["id"] . '">Options</a>';
    $menulinks .= '<ul class="bbp_custom_links_submenu">';
    foreach($r['links'] as $key => $val) {
        $menulinks .= "<li>{$val}</li>";
    }
    $menulinks .= '</ul></li></ul>';

    echo $r['before'] . $menulinks . $r['after'];
    }
}
add_filter('bbp_get_topic_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);
add_filter('bbp_get_reply_admin_links', 'wpmudev_bbp_admin_links_in_menu', 10, 3);

add_action( 'wp_footer', 'overflow_overriding' );
function overflow_overriding() {
    if ( !is_user_logged_in() ) {
    }else{
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {

    $('.bbp-admin-links:even').css({position: 'absolute', right: '380px'});

    $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) {
        $(this).next('.bbp_custom_links_submenu').toggle();
        e.preventDefault();
    })
    .on('mouseup touchend', function(e) {
        e.stopPropagation();
    });

    $(document).on('mouseup touchend', function(e) {
        if (!$(e.target).closest('.bbp_custom_links_submenu').length) {
        $('.bbp_custom_links_submenu').hide();
        }
    });
});
</script>

     <?php
    }
}

Thanks.

[Anonymous]

Hello,
I was just looking at one more thing. To improve the accessibility of sub menus, this should be added based on if the sub menu is open or closed.

aria-expanded (false)
aria-expanded (true)

Any suggestions on how I can incorporate this in to my existing code? Sorry for coming back like this, just trying to design without mistakes.

Thanks.

[Shikkediel]

To which element should it be added then? Generally one would go for a addClass, removeClass or toggleClass for this.

[Anonymous]

Hello,
You cannot remove the child class because all the menus on the page will open. In that code I posted above, true means the menu is open, false means it is closed. How do I make this work?

Thanks.

[Shikkediel]

I would just add or remove an expanded class – if the element has that, it’s the same as true. If not, it would be false.

jQuery(document).ready(function($) {

    $('.bbp-admin-links:even').css({position: 'absolute', right: '380px'});

    $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) {
        $(this).next('.bbp_custom_links_submenu').toggle();
        $(this).closest('.parent').toggleClass('expanded');
        e.preventDefault();
    })
    .on('mouseup touchend', function(e) {
        e.stopPropagation();
    });

    $(document).on('mouseup touchend', function(e) {
        if (!$(e.target).closest('.bbp_custom_links_submenu').length) {
        $('.bbp_custom_links_submenu').hide();
        $('.parent').removeClass('expanded');
        }
    });
});

Many ways to go about this though. Hard to say much more without knowing the exact purpose.

Edit – copied and pasted the typo again. :-/

[Anonymous]

Hello,
The purpose of this is to let screen reader users know when the menu is opened, expanded, or closed, collapsed. That code did not work.

Thanks.

[Anonymous]

Hello,
This is what I am trying to use with this menu.
https://www.w3.org/WAI/GL/wiki/Using_ARIA_menus

After this, it should be accessible.

Thanks for your help.

[Shikkediel]

Something like this then, I guess.

jQuery(document).ready(function($) {

    $('.bbp-admin-links:even').css({position: 'absolute', right: 380});

    $('.bbp-meta ul.bbp_custom_links_menu li.parent > a').click(function(e) {

        var options = $(this).closest('.parent');

        if (options.attr('aria-expanded') == 'true') options.attr('aria-expanded', 'false');
        else options.attr('aria-expanded', 'true');

        $(this).next('.bbp_custom_links_submenu').toggle();
        e.preventDefault();
    })
    .on('mouseup touchend', function(e) {
        e.stopPropagation();
    });

    $(document).on('mouseup touchend', function(e) {

        if (!$(e.target).closest('.bbp_custom_links_submenu').length) {
        $('.bbp_custom_links_submenu').hide();
        $('.parent').attr('aria-expanded', 'false');
        }
    });
});

For any further possible coding, a pen would really be required. It’s all untested like this to start with and a back and forth about it is a bit too circumventive. ;-)

[Anonymous]

Hello,
The screen reader now announces when moving out and in of the list of menu links. It still does not announce when the menu is opened or closed. Any more suggestions?

I cannot use a CodePen because it is not accessible with my screen reader. I understand it would make it easier, but I cannot use it. :(

If you need to do some further testing, the only thing that has changed is the password on that account.
New Password: test#123

Thanks for your help.

[Author]

Posts