防止類'子菜單'中的ul元素成爲Wordpress菜單中列表項的子元素

我有一個使用WordPress模板標記<?php wp_nav_menu(); ?>生成的菜單。防止類'子菜單'中的ul元素成爲Wordpress菜單中列表項的子元素

生成的代碼是：

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

我似乎無法找到答案。

來源

2012-11-14 Jack Thor

這不是你應該試圖實現的。它是非法的UI元素是另一個UI元素的子：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

來源

2012-11-14 10:31:06 adhocgeek

Ahh謝謝，我不知道ul元素是另一個ul元素的孩子是非法的。如果理論上所有的ul和li元素都是div，那麼問題怎麼解決呢？ –

然後你在看wp_nav_menu的實現。我不確定你是否可以像這樣限制它，但肯定文檔會幫助你擴展默認行爲？ http://codex.wordpress.org/Function_Reference/wp_nav_menu – adhocgeek

感謝您的幫助！ –

所以我看到你想要一個結構，但是div的，而不是UL的和利的。你可以嘗試找到代碼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

我不知道如果這正是你以後，但可能你可以玩的學步車，看看你能達到你想要的。

來源

2012-11-14 12:01:46

防止類'子菜單'中的ul元素成爲Wordpress菜單中列表項的子元素

回答

相關問題