How to add toggle-able DOM element after nav menu item?

Question

I've got this menu on my site:

<ul id="menu-primary" class="offcanvas">
    <li class="menu-item menu-item-has-children">
        <a href="#">Parent</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="#">Child</a>
            </li>
        </ul>
    </li>
    <li class="menu-item menu-item-has-children">
        <a href="#">Parent</a>
        <ul class="sub-menu">
            <li class="menu-item">
                <a href="#">Child</a>
            </li>
        </ul>
    </li>
    <li class="menu-item">
        <a href="#">Parent</a>
    </li>
    <li class="menu-item">
        <a href="#">Parent</a>
    </li>
</ul>

I added in some Jquery to hide the sub-menus and to show them once you click on the parent link but this causes the parent link not to function and just toggle the sub-menu.

So i'd like to add a toggle-able element via a <i> tag or <span> tag after the main parent link and then just change the jquery to target that instead making the main parent link still click-able.

How would I go about doing this?

Answer 1

You can easily add any HTML element to all menu items that have children by extending the Walker_Nav_Menu core class. The code below will add <i> icon element just after menu item </a> tag but you can of course change that if you need them inside or somewhere else by changing the $item_output variable.

function yourprefix_menu_arrow($item_output, $item, $depth, $args) {
    if (in_array('menu-item-has-children', $item->classes)) {
        $arrow = '<i class="fa fa-angle-down"></i>'; // Change the class to your font icon
        $item_output = str_replace('</a>', '</a>'. $arrow .'', $item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'yourprefix_menu_arrow', 10, 4);

Cheers!