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

admin管理员组

文章数量:1122846

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?

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?

• menus
• jquery
• navigation
• sub-menu

Share Improve this question edited Jun 28, 2024 at 20:03 Jesse Nickles 73577 silver badges1919 bronze badges asked Aug 19, 2019 at 10:50 DemonixDemonix 6133 silver badges1212 bronze badges 2

• Related: wordpress.stackexchange.com/questions/45647/… – Jesse Nickles Commented Jun 26, 2024 at 18:22
• Related: wordpress.stackexchange.com/questions/282816/… – Jesse Nickles Commented Jun 26, 2024 at 19:45

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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!

本文标签： jqueryHow to add toggleable DOM element after nav menu item