使用JQuery移動版本導航創建選擇/下拉列表

Question

我正在開發一個需要響應的網站。我想將導航轉換爲<select>。 <nav>以及<nav>內部的任何數量的<ul>都可以有任意數量。我用for loops來計算<nav> and <ul> inside <nav>的數量。

一個正在生成，另一個不生成，請幫我解決這個問題。

here is the jsfiddle

Answer 1

它不工作，因爲你正在尋找.children('ul')，這不僅包括立即後裔，但是你的第二個nav有div的ul纏...

你可以更改.children致電.find尋找後代在任何深度

- 切斷這裏 -

替代解決方案：

$('nav').each(function(navIndex, navElement) { 

    $(this).find('ul').each(function(ulIndex, ulElement) { 

     var $sel = $('<select name="nav'+navIndex+'-'+ulIndex+'" />'); 
     $sel.append('<option value="#">Go to...</option>'); 
     $sel.change(function() { document.location.href = this.value; }); 

     $(this).find('li>a').each(function(aIndex, aElement) { 
      $sel.append('<option value="' + this.href + '">' + $(this).text() + '</option>'); 
     }); 

     $(this).after($sel); // place this select after the ul... 

    }); 
});