Home › Forums › JavaScript › Close menu on click of Options button and outside of container
- This topic is empty.
-
AuthorPosts
-
April 10, 2016 at 11:51 am #240397
Anonymous
InactiveHello,
Found this link with some code that would work, just do not know how to put it in to action.
http://stackoverflow.com/questions/25135736/does-jquery-mouseup-event-work-on-touch-devicesThanks for your help.
April 10, 2016 at 12:06 pm #240398Shikkediel
ParticipantYou have two options here – revert all listeners to clicks (these’ll work on touch devices) or include touch events.
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(); e.stopPropagation(); }); $(document).click(function(e) { if (!$(e.target).closest('.bbp_custom_links_submenu').length) { $('.bbp_custom_links_submenu').hide(); } }); });
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(); }) .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(); } }); });
From the top of my head, that is.
April 10, 2016 at 12:24 pm #240400Anonymous
InactiveHello,
The first one still does not work for mobile devices, the second one does not work at all, there is an error in the 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(); }) .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(); } }); }); </script>
Thanks.
April 10, 2016 at 12:25 pm #240402Anonymous
InactiveHello,
I currently have the 2nd piece of code in if you want to check on the site.Thanks for your help.
April 10, 2016 at 12:29 pm #240403Shikkediel
ParticipantI made a typo in this line in any case, while shortening the code somewhat :
if ($(!(e.target).closest('.bbp_custom_links_submenu').length) {
Should be :
if (!$(e.target).closest('.bbp_custom_links_submenu').length) {
April 10, 2016 at 12:37 pm #240404Anonymous
InactiveHello,
You are awesome, now it works for closing it with mobile devices on tap outside of the container.Thanks for all your help.
April 10, 2016 at 12:39 pm #240405Anonymous
InactiveHello,
The final code is:/*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(); }) .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(); } }); }); </script> <?php } }
Thanks.
April 10, 2016 at 7:43 pm #240414Anonymous
InactiveHello,
I was just looking at one more thing. To improve the accessibility of sub menus, this should be added based on if the sub menu is open or closed.aria-expanded (false) aria-expanded (true)
Any suggestions on how I can incorporate this in to my existing code? Sorry for coming back like this, just trying to design without mistakes.
Thanks.
April 11, 2016 at 7:31 am #240431Shikkediel
ParticipantTo which element should it be added then? Generally one would go for a
addClass
,removeClass
ortoggleClass
for this.April 11, 2016 at 7:50 am #240432Anonymous
InactiveHello,
You cannot remove the child class because all the menus on the page will open. In that code I posted above, true means the menu is open, false means it is closed. How do I make this work?Thanks.
April 11, 2016 at 8:09 am #240433Shikkediel
ParticipantI would just add or remove an
expanded
class – if the element has that, it’s the same astrue
. If not, it would befalse
.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(); $(this).closest('.parent').toggleClass('expanded'); 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(); $('.parent').removeClass('expanded'); } }); });
Many ways to go about this though. Hard to say much more without knowing the exact purpose.
Edit – copied and pasted the typo again. :-/
April 11, 2016 at 8:28 am #240435Anonymous
InactiveHello,
The purpose of this is to let screen reader users know when the menu is opened, expanded, or closed, collapsed. That code did not work.Thanks.
April 11, 2016 at 9:32 am #240439Anonymous
InactiveHello,
This is what I am trying to use with this menu.
https://www.w3.org/WAI/GL/wiki/Using_ARIA_menusAfter this, it should be accessible.
Thanks for your help.
April 11, 2016 at 10:01 am #240440Shikkediel
ParticipantSomething like this then, I guess.
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('.parent'); 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(); $('.parent').attr('aria-expanded', 'false'); } }); });
For any further possible coding, a pen would really be required. It’s all untested like this to start with and a back and forth about it is a bit too circumventive. ;-)
April 11, 2016 at 10:17 am #240446Anonymous
InactiveHello,
The screen reader now announces when moving out and in of the list of menu links. It still does not announce when the menu is opened or closed. Any more suggestions?I cannot use a CodePen because it is not accessible with my screen reader. I understand it would make it easier, but I cannot use it. :(
If you need to do some further testing, the only thing that has changed is the password on that account.
New Password: test#123Thanks for your help.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.