Home › Forums › JavaScript › Close menu on click of Options button and outside of container
- This topic is empty.
-
AuthorPosts
-
April 9, 2016 at 3:49 pm #240348
Anonymous
InactiveHello,
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.
April 10, 2016 at 5:25 am #240357Shikkediel
ParticipantCould 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.April 10, 2016 at 6:54 am #240361Anonymous
InactiveHello,
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#1234There will be an Options button that appears, that is the menu.
Thanks for the help.
April 10, 2016 at 9:24 am #240371Shikkediel
ParticipantNot 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(); });
April 10, 2016 at 9:31 am #240372Anonymous
InactiveHello,
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.
April 10, 2016 at 9:39 am #240373Anonymous
InactiveHello,
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.
April 10, 2016 at 10:25 am #240374Shikkediel
ParticipantWith 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.
April 10, 2016 at 10:44 am #240377Anonymous
InactiveUseless CodePen removed.
April 10, 2016 at 10:50 am #240380Anonymous
InactiveUseless CodePen removed.
April 10, 2016 at 10:52 am #240382Anonymous
InactiveHello,
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.
April 10, 2016 at 11:07 am #240385Anonymous
InactiveHello,
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.
April 10, 2016 at 11:12 am #240387Shikkediel
ParticipantYeah, 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(); } }); });
April 10, 2016 at 11:16 am #240388Anonymous
InactiveHello,
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.
April 10, 2016 at 11:17 am #240389Shikkediel
ParticipantGlad to help out. :-)
April 10, 2016 at 11:36 am #240394Anonymous
InactiveHello,
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.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.