Question

我有一个使用wordpress模板标记<?php wp_nav_menu(); ?>生成的菜单。

生成的代码是：

<div class="menu">
<ul>
<li class="current_page_item">Current Page</li>
    <li class="page_item page-item-58">Menu Item #1
        <ul class='sub-menu'>
            <li class="page_item page-item-62">Child Item #1</li>
            <li class="page_item page-item-60">Child Item #2</li>
        </ul><!--END page-item-58 -->
    </li>
</ul>
</div>

我的问题是：您如何阻止<ul class='sub-menu'>成为<li class="page_item page-item-58">的孩子？

我希望生成的代码看起来像这样：

<div class="menu">
<ul>
<li class="current_page_item">Current Page</li>
    <li class="page_item page-item-58">Menu Item #1</li><!--END page-item-58 -->
    <ul class='sub-menu'>
        <li class="page_item page-item-62">Child Item #1</li>
        <li class="page_item page-item-60">Child Item #2</li>
    </ul>
</ul>
</div>

我似乎无法找到答案。

Answer 1

这不是你应该努力实现的。 ul元素是另一个ul元素的子元素是非法的：http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element

另请参阅w3规范：http://www.w3.org/TR/html401/struct/lists.html#h-10.2

Answer 2

所以我看到你想要那个结构，但是用div而不是ul和li。您可以尝试找到here找到的代码，看看它是否适合您？

这是一个扩展Walker_Nav_Menu的类，其输出为：

<div class="menu-main-menu-container">
    <div id="menu-main-menu" class="menu">
        <div id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4"><a href="#">Sample Page</a></div>
        <div class="sub-menu">
            <div id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="#">Sub-menu</a>
                <div class="sub-menu">
                    <div id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6"><a href="#">Sub-sub-menu</a></div>
                </div>
            </div>
            <div id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="#">Another sub-menu</a></div>
        </div>
    </div>
</div>

它将会做的是，它不会在其所属的父级中包装第一级子菜单，但会对更深的子菜单执行此操作。这是菜单的结构：

 - Sample Page
   - Sub-menu
     - Sub-sub-menu
   - Another sub-menu

我不确定这是不是你所追求的，但可能你可以和助行器一起玩，看看你是否能达到你想要的效果。

防止带有“子菜单”类的ul元素成为Wordpress菜单中列表项的子元素

2 个答案: