WordPress 子菜单父类别链接在 Chrome 和 Android 上不起作用

编程问答 2022-05-28

问题描述

我无法让以下菜单正常工作。我有一个相当典型的 wordpress 菜单 (.main-navigation)，其中包含类别和子类别。在手机版中，我设置了一个手风琴系统来展开子类别。

<ul class="sub-menu">
<li id="menu-item-1112" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-1112"><a href="/product-category/tables/">Tables</a><i class="fa fa-angle-down"></i>

    <ul class="sub-menu">

        <li id="menu-item-1113" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1113"><a href="/product-category/tables/tables-a-manger/">Tables à manger</a></li>

        <li id="menu-item-1114" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-1114"><a href="/product-category/tables/tables-basses/">Tables basses</a></li>

    </ul>
</li>
</ul>

我在父类别旁边插入一个箭头 (.fa-angle-down) 以允许用户单击链接。在 Firefox 下，该链接可点击和访问，但在 Chrome 下，它无处可去。

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

除了我为子菜单设置的行为之外，我还喜欢另一种行为，以便在单击时关闭上一个菜单。目前我们必须一一关闭它们……下面是我的小 JS 函数。有没有人有想法，我在 JS 方面的知识太有限了 :( ？很多谢谢。

jQuery(document).ready(function($) {
    $('.main-navigation.toggled .sub-menu').hide();
    $(document).on('click','.main-navigation .fa-angle-down',function(e){
       e.preventDefault();
       $(this).siblings('.sub-menu').slidetoggle('slow’);
    });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptjquerytogglewordpresswordpress