我正在创建一个移动导航菜单。我不希望菜单像这样工作：
在此图像中，您可以看到具有多个深度级别的移动导航。
我不希望代码结构是这样的：
<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函数，但我不确定如何添加。
最合适的回答,由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");
});
这很好，但是有没有更好的方法来检查菜单项是否有子项？搜索类名并不是最好的解决方案。
