防止具有“子菜單”類的 ul 元素成為 Wordpress 菜單中列表項的子元素

Question

我有一個使用 wordpress 模板標簽生成的菜單<?php wp_nav_menu(); ?> <?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。 你能試試這里找到的代碼，看看它是否適合你？

它是一個擴展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

我不確定這是否正是您所追求的，但也許您可以玩轉助行器，看看是否可以實現您想要的。