1

我正在尝试让我的导航栏与调整大小一起使用。当屏幕尺寸减小时，它会转换为选择选项。
它可以工作，但问题是当屏幕尺寸减小时，第一个选项显示在选择框中，而不是当前选项。

我希望选择框保持在当前选定的选项。

这是我的代码

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 代码有什么问题吗？请帮我解决问题

4

1 回答 1

0

试试这个：（假设链接在活动时具有“选择”类）

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();
});
于 2013-05-29T00:04:23.873 回答