Close menu on click of Options button and outside of container

[Anonymous]

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.

[Shikkediel]

Could you maybe make a small demo out of it?
It’ll be a lot easier to debug that way…

First instinct tells me it would need a e.stopPropagation() here or there though.

[Anonymous]

Hello,
That is just the jQuery posted above, if you need the HTML and everything else that goes with it, please let me know.

Moving on, if you need a demo, please visit the below link.
http://yourtechadvisors.com/forums/topic/options-menu-test-2/

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

There will be an Options button that appears, that is the menu.

Thanks for the help.

[Shikkediel]

Not very easy to debug there but you could give this a try instead :

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

[Anonymous]

Hello,
The menu does not open at all now. I think there might be an error in the code.

Full 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();
})
.mouseup(function(e) {
    e.stopPropagation();
});
</script>

Thanks.

[Anonymous]

Hello,
Is there anyway I could provide a better testing environment for you? I really don’t know what would be better other than the menu itself.

Thanks.

[Shikkediel]

With the code above, you’re missing some closing brackets…

.mouseup(function(e) {
    e.stopPropagation();
});
});
</script>

I do believe that it should work otherwise. If not, posting the isolated problem on Codepen would be easiest.

Edit – you’d still need the other bit of code as well by the way. This extra listener will just take care of the fact that it will not respond to a click on the options link.

[Anonymous]

Useless CodePen removed.

[Anonymous]

Useless CodePen removed.

[Anonymous]

Hello,
I cannot make the CodePen work for this situation. Here is the full code, if you can get it to work, thanks in advance.

/*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();
})
.mouseup(function(e) {
    e.stopPropagation();
});
});
</script>

     <?php
    }
}

Thanks.

[Anonymous]

Hello,
Oh, really? So what should the full code look like?

“`
Hello,
I just saw your edit. Can you please write out the full jQuery code that should be there?

Thanks.

[Shikkediel]

Yeah, you’d have to copy the HTML from the page source. Raw PHP won’t work on someone else’s server. But the code seems to be working fine :

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();
    })
    .mouseup(function(e) {
      e.stopPropagation();
    });

    $(document).mouseup(function(e) {
      if ($(e.target).closest('.bbp_custom_links_submenu').length === 0) {
        // Not within the container
        $('.bbp_custom_links_submenu').hide();
      }
    });
});

[Anonymous]

Hello,
Yes, yes, yes, it is working. Thanks for all the help you have provided, this project has been going on well over a couple of months and I am glad to see it finished.

Thanks.

[Shikkediel]

Glad to help out. :-)

[Anonymous]

Hello,
Sorry to bother you with anything else. It appears the .mouseup function is not compatible with mobile devices, is there any way to make this work for mobile too?

Thanks.

[Author]

Posts