Close menu on click of Options button and outside of container

[Shikkediel]

I’m tapping out as I’m not familiar with the aria standard. Maybe another member has more experience with it. The basic jQuery (changing the attribute) should be as mentioned though.

[Anonymous]

Hello,
A staff member from WPMU DEV helped me figure out why it is not working, but we did not have time in the chat session to come up with a fix.

Quoted text:
“But for quick look it does that for wrong element – when I check this jQuery lib it adds it to the actual sub menu, not the parent .”

Any suggestions?

Thanks so much for your help.

[Anonymous]

Hello,
Just to remind, you can view the menu over here.
http://yourtechadvisors.com/forums/topic/options-menu-test/

Click login and use these details.
Username: css-tricks
Password: test#123

Thanks.

[Anonymous]

Hello,
Sorry, updated link.
http://yourtechadvisors.com/forums/topic/testing-menu/

Thanks.

[Shikkediel]

Reading the site, I understand it might be quite impossible for you to create a Codepen. But I really have no idea which element should be selected for the screen reader. You could give this variation a go :

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('ul');

        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();
        $('.bbp_custom_links_menu').attr('aria-expanded', 'false');
        }
    });
});

[Anonymous]

Hello,
Still not working, any more suggestions?

Thanks.

[Shikkediel]

Not really, since I am not using that screen reader. I think it’s up to yourself now to figure out which one is the relevant element, then change these two lines to match it :

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

$('.bbp_custom_links_menu').attr('aria-expanded', 'false');

[Anonymous]

Thanks.

[Author]

Posts