Close menu on click of Options button and outside of container

JavaScript
1

Hello,
I have some jQuery. My goal is to

  • Make menu close on click of Options button.
  • Make menu close on click outside of menu container.

The menu was closing fine on click of the Options button, but now it does not because I added some code to close it on click of the outside of container, and this is currently the only way to close it. I need to close it both ways. Can anyone help?

My 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();
          });
          $(document).mouseup(function(e) {
                if ($(e.target).closest('.bbp_custom_links_submenu').length === 0) {
                      // Not within the container
                      $('.bbp_custom_links_submenu').hide();
                }
          });
    });
</script>

Thanks.

2

Can you help us to approach this from a working starting point?

What was the working code that you had for when clicking on the options button?

3

Hello,
The code that was working to close the menu on click of the Options button but not outside of the container is:

<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>

Thanks.

4

Hello,
This is the full code in my WordPress themes functions.php file if you need it. Same jQuery as posted in my last reply, it is the working version.

/*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
    }
}

Thanks.

5

Hello,
If you need to see it live, you can view it below.
http://yourtechadvisors.com/forums/topic/options-menu-test

Please click login and use the following details.
Username: sitepoint-forums
Password: sitepoint-forums#123

Thanks.

6

Hello,
Answer can be found here.

Thanks.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.