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

通过jquery响应导航

1 个答案: