通过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(); 
});