創建導航選項「子菜單」

我使用下面的代碼將標準導航轉換爲Wordpress中響應主題的選擇菜單。創建導航選項「子菜單」

jQuery(document).ready(function ($) { 
    $("<select />").appendTo("nav"); 

    $("<option />", { 
     "selected": "selected", 
     "value": "", 
     "text": "Go to..." 
    }).appendTo("nav select"); 

    $("nav a").each(function() { 
     var el = $(this); 
     $("<option />", { 
      "value": el.attr("href"), 
      "text": el.text() 
     }).appendTo("nav select"); 
    }); 

    $("nav select").change(function() { 
     window.location = $(this).find("option:selected").val(); 
    }); 

    $('#navigasi_menu_reseponsive').remove(); 
});

一切工作正常與上面的代碼。我想知道如何添加條件來處理子菜單。例如，這裏是WordPress導航創建的默認HTML。

<nav> 
    <div id="navigasi_menu_reseponsive"> 
     <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-500"> 
      <a href="http://localhost/themes123/category/portfolio/">Custom Color</a> 
     </li> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-349"> 
      <a href="#">Category</a> 
      <ul class="sub-menu"> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-246"> 
        <a href="http://localhost/themes123/category/interior/">Interior</a> 
       </li> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-548"> 
        <a href="http://localhost/themes123/category/portfolio/">Portfolio</a> 
       </li> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-245"> 
        <a href="http://localhost/themes123/category/lifestyle/">Lifestyle</a> 
       </li> 
       <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-367"> 
        <a href="http://localhost/themes123/category/examples/">Examples</a> 
       </li> 
      </ul> 
     </li> 
    </div> 
</nav>

我想要做的就是前面加上「 - 」到有一類子菜單的每個UL讓我的名單看起來是這樣的：

轉到...

範疇（這將是父母）

- 室內裝飾（這將是與孩子 ' - '）

- 投資組合（這將是孩子 ' - '）

- 生活

- 例如

等等

有人可以幫幫忙？謝謝

來源

2013-08-27 vicky123

這是我當前的代碼（選擇菜單）中的jsfiddle：http://jsfiddle.net/SzBcm/1/ – vicky123

http://jsfiddle.net/cse_tushar/SzBcm/3 /檢查較短的代碼。 –

想要這樣嗎？

http://jsfiddle.net/SzBcm/2/

$('ul.sub-menu li a').each(function(index, item) { 
    $(this).text('--' + $(this).text()); 
});

來源

2013-08-27 15:51:15

非常感謝Harold的幫助。問題解決了：） – vicky123

DEMO

$('.sub-menu li').prepend('--');

更新

DEMO

$('.sub-menu li a').prepend('--')

來源

2013-08-27 15:53:52

嘗試

jQuery(function ($) { 
    var $select = $("<select />").appendTo("nav"); 

    $("<option />", { 
     "selected": "selected", 
     "value": "", 
     "text": "Go to..." 
    }).appendTo($select); 

    function add($ct, $a){ 
     $("<option />", { 
      "value": $a.attr("href"), 
      "text": $a.text() 
     }).appendTo($ct); 

    } 

    function addGroup($group, $ul){ 
     $ul.children().each(function(){ 
      var $li = $(this), $a = $li.children('a'); 
      add($group, $a) 
     }) 
    } 

    $('#navigasi_menu_reseponsive > li').each(function(){ 
     var $li = $(this), $a = $li.children('a'); 

     if($li.is(':has(ul)')){ 
      var $group = $('<optgroup />', { 
       label: $a.text() 
      }).appendTo($select); 
      addGroup($group, $li.children('ul')); 
     } else { 
      add($select, $a) 
     } 
    }) 

    $("nav select").change(function() { 
     window.location = $(this).find("option:selected").val(); 
    }); 

    $('#navigasi_menu_reseponsive').remove(); 

});

演示：Fiddle

來源

2013-08-27 15:55:28

創建導航選項「子菜單」

回答

相關問題