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