1

I am trying to add

onclick="toggle_visibility('sub-menu');"

into the opening tag of specific menu items generated in WordPress. I have used the following function to target all parent menu items and now need to find the correct js to add this in dynamically.

function menu_set_dropdown( $sorted_menu_items, $args ) {
    $last_top = 0;
    foreach ( $sorted_menu_items as $key => $obj ) {
        // it is a top lv item?
        if ( 0 == $obj->menu_item_parent ) {
            // set the key of the parent
            $last_top = $key;
        } else {
            $sorted_menu_items[$last_top]->classes['dropdown'] = 'dropdown';
        }
    }
    return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );

I have tried this in my footer but it's not working. I may be using the wrong script, or I may not be using this correctly.

    <script type="text/javascript">
        $('.res-clearfix li.dropdown a').click(function() {
            onclick="toggle_visibility('sub-menu');"
        });
    </script>
  • By default WordPress loads jQuery in no conflict mode so $() doesn't work. Change it to jQuery(). – Cedon Mar 15 '17 at 20:59
  • You're welcome. I would suggest using the function @MacPrawn provided. Also, make sure you add the proper ARIA attributes to your menu too assist people using accessibility technologies. – Cedon Mar 16 '17 at 13:10
0

So yes, by far you should use the new event handlers instead of adding attributes to your html tags. (so your second method, in the footer)

The reason your footer code didn't work is because you didn't quite figure out how to transfer from the attribute to the handler form...

When you say onclick="toggle_visibility('sub-menu');" the "onclick=" is an html attribute and anything inside the double-quotes after that is javascript code.

So to make that into a jquery click handler, you just need the javascript code part:

<script type="text/javascript">
    $(function() { // <--- make sure we don't run our code before the page is ready!
        $('.res-clearfix li.dropdown a').click(function() {
            toggle_visibility('sub-menu');
        });
    });
</script>

Hope this helps!

  • That code will not work with WordPress by default because WP loads jQuery in noconflict mode so $() does not work. Changing it to jQuery() will or wrapping the whole thing in an anonymous function passing jQuery in: (function($){ // Your Code })( jQuery ); – Cedon Mar 15 '17 at 21:03
  • Yes, you're right of course - but I merely answered the original question. The click event might have to be prevented too, but that is beyond the scope of this question. If we give it all away, how will we all learn? ;) – MacPrawn Mar 15 '17 at 22:01
  • Thanks to you both. I'm afraid not seeing any change from replacing the $() with jQuery(). @MacPrawn - Thanks for the clarity on the makeup of my code. I may be using the wrong piece of js for the result I am after if I am to achieve it without html attributes. Or maybe 'the click event might have to be prevented too', but I'm not sure what that means. – mtm Mar 16 '17 at 9:05
  • So is there a web page somewhere where we could see your menu html? Maybe even try it out? And are you sure your toggle_visibility function works? – MacPrawn Mar 16 '17 at 9:35
  • I had the same thought about the function - it led me to fix this issue another way by using .toggleClass to add a .hidden and .visible class to my stylesheet which I could call on click. You can see it here. – mtm Mar 16 '17 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.