How to close menu when clicking on page whitespace?

How to close menu when clicking on page whitespace?

Hello,
I have a custom menu that a few nice people helped me build to hold all the admin links for the BBPress plugin for WordPress. Currently, if you click the Options button, it will open, click it again, it will close. I would like to add some additional jQuery to make it close when a user selects a place outside of the menu container/page whitespace.

Here is my code.
  1. /*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() {
    jQuery('.bbp-admin-links:even').css({"position": "absolute", "right": "380px"});
    });
    jQuery(".bbp-meta ul.bbp_custom_links_menu li.parent > a").click(function(e) {
    jQuery(this).next('.bbp_custom_links_submenu').toggle();
    e.preventDefault();
    });
    </script>

         <?php
        }
    }
Can you please help me modify the code so that clicking outside of the menu container will close the menu on desktops and smartphones? I tried this code already, but then the menu would not close at all on phones.

  1. jQuery(document).mouseup(function (e)
    {
    var container = jQuery(".bbp_custom_links_submenu ");
    
    if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
    container.hide();
    }
    });
Any suggestions?

Thanks for your help.

Alex S
Website administration is my dream job!