如何在所有有子菜单的“li”元素中添加一个子菜单切换按钮？

时间：2017-10-13 作者：Skovsgaard

我正在创建一个移动导航菜单。我不希望菜单像这样工作：

enter image description here

在此图像中，您可以看到具有多个深度级别的移动导航。

我不希望代码结构是这样的：

<ul>
    <li></li>
    <li class="menu-item-has-children">
        <div class="toggle-button"></div>
        <a href=""></a>
        <ul class="submenu">
            <li></li>
            <li class="menu-item-has-children">
                <div class="toggle-button"></div>
                <a href=""></a>
                <ul class="submenu"></ul>
            </li>
        </ul>
    </li>
</ul>
您可以看到一个菜单项“Products”，其中包含隐藏的子项。

下面是“工业”。单击右侧的切换按钮时，将显示子级。还可以切换下一个子菜单级别的子菜单，依此类推。

我正在输出所有菜单项\'depth\' => \'0\', 现在我不想让子菜单可扩展。

为此，我需要添加一个toggle HTML元素（参见上面的代码结构），我可以使用jQuery在父元素上切换一个“活动”类，然后显示子元素。

My question

如何在all中添加此切换元素<li> 对于所有深度级别，都有子元素的元素？

我想我需要过滤wp_nav_menu 或者添加一个自定义walker函数，但我不确定如何添加。

1 个回复
最合适的回答,由SO网友:Skovsgaard 整理而成

我设法解决了这个问题：

Create the function

因此，我在函数中创建了一个新的自定义walker函数。并复制了核心wp nav walker函数（wp includes/class walker nav menu.php）的所有代码。

Check for a menu item that has children

然后我添加了这个array_search 在里面public function start_el 要检查父元素是否具有类“menu item has children”：

$has_children = array_search ( \'menu-item-has-children\' , $classes );

Output the toggle button

然后在start_el 函数if$has_children 是真的：

if($has_children != false) :
    $item_output .= \'<div class="toggle-button"></div>\';
endif;

Making it all work

然后，我添加了jQuery以在toggle按钮的父元素上切换一个类。

jQuery(".toggle-button").click( function (){
    $(this).parent().toggleClass("menu-collapsed");
});
这很好，但是有没有更好的方法来检查菜单项是否有子项？搜索类名并不是最好的解决方案。

结束
标签： menus   navigation   walker   sub-menu   mobile   小码农  

相关推荐

Making sub-menus exclusive

我真的不知道该怎么解释我在这里找的东西，我在这里找得太露骨了。在我的网站上，我有一个附带菜单，其中包含一系列子类别，每个子类别中都有一些项目。我想知道当我打开另一个子类别时，是否有办法关闭所有其他打开的子类别，例如：1. Animals ----A. Cats ----B. Dogs 2. People ----A. Samantha ----B. Daniel 当我按下“动物”时，我希望“人”关闭，反之亦