通過jquery的響應式導航

Question

我想讓我的導航欄與調整大小一起工作。 當屏幕尺寸縮小時，它會轉換爲選擇選項。
它的工作原理，但問題是當屏幕尺寸減小時，第一個選項顯示在選擇框中而不是當前選項。

我希望選擇框留在當前選定的選項。

---

這裏是我的代碼

jQuery('<select />').appendTo('#navigation'); 

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

jQuery('#navigation select').change(function() { 
    window.location = jQuery(this).find("option:selected").val(); 
}); 

---

有沒有在我的jQuery代碼的任何故障？請幫我解決這個問題

Answer 1

試試這個：（假設鏈路級的「選擇」激活時）

jQuery('<select />').appendTo('#navigation'); 

jQuery('#navigation a').each(function() { 
    var el = jQuery(this); 
    var current = jQuery('<option />', { 
     "value": el.attr("href"), 
      "text": el.text() 
    }); 

    url = document.URL.split('/'); 
    if(url[url.length-1] == current.attr('value')) 
     current.prop('selected', true); 
    current.appendTo('#navigation select'); 
}); 

jQuery('#navigation select').change(function() { 
    window.location = jQuery(this).find("option:selected").val(); 
}); 

對於第二個模板（刪除<select>你已經到了那裏）：

jQuery('<select />').appendTo('#navigation'); 

jQuery('#menu-new-main-menu li a').each(function() { 
    var el = jQuery(this); 
    var current = jQuery('<option />', { 
     "value": el.attr("href"), 
      "text": el.text() 
    }); 

    if(document.URL == current.attr('value')) 
     current.prop('selected', true); 
    current.appendTo('#navigation select'); 
}); 

jQuery('#navigation select').change(function() { 
    window.location = jQuery(this).find("option:selected").val(); 
});