javascript - Add code to WordPress menu items by class

admin管理员组

文章数量:1122846

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>

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>

• menus
• javascript
• sub-menu

Share Improve this question asked Mar 15, 2017 at 17:26 mtmmtm 4388 bronze badges 2

• By default WordPress loads jQuery in no conflict mode so $() doesn't work. Change it to jQuery(). – Cedon Commented Mar 15, 2017 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 Commented Mar 16, 2017 at 13:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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!

本文标签： javascriptAdd code to WordPress menu items by class