我的网站上有以下菜单：

<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>

我添加了一些Jquery来隐藏子菜单，并在单击父链接时显示它们，但这会导致父链接不起作用，而只是切换子菜单。

所以我想通过<i> 标签或<span> 在主父链接后标记，然后将jquery更改为target，而使主父链接仍然可以单击。

我该怎么做呢？

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);