Javascript为一页上的第二个响应式选择导航

Question

我正在构建一个响应式网站，当视口宽度小于800px时，该网站使用javascript为主导航菜单创建选择导航。此选择导航按计划工作。

现在，我正在尝试将SECOND响应选择导航添加到几个页面（明显包含主导航菜单的页面）。我复制了脚本（用于启用主导航菜单成为选择导航的脚本），并尝试重命名几个变量以使辅助导航菜单响应（类似于主导航菜单）。当视口低于800px时，辅助导航菜单会显示响应式选择导航，但是，当您从此菜单中选择辅助页面时，没有任何反应。用户不会进入新的辅助页面。

你可以帮我解决这个问题吗？

我试图设置一个jfiddle http://jsfiddle.net/R3AD3/ 以下是主导航菜单的脚本：

function selectnav() {

var select = document.createElement('select');
var first = document.createElement('option');

first.innerHTML = 'Main Navigation';
first.setAttribute('selected', 'selected');
select.setAttribute('id', 'mobile');
select.appendChild(first);

var nav = document.getElementById('nav');
var loadLinks = function(element, hyphen, level) {

    var e = element;
    var children = e.children;

    for(var i = 0; i < e.children.length; ++i) {

        var currentLink = children[i];

        switch(currentLink.nodeName) {
            case 'A':
                var option = document.createElement('option');
                option.innerHTML = (level++ < 1 ? '' : hyphen) + currentLink.innerHTML;
                option.value = currentLink.href;
                select.appendChild(option);
                break;
            default:
                if(currentLink.nodeName === 'UL') {
                    (level < 2) || (hyphen += hyphen);
                }
                loadLinks(currentLink, hyphen, level);
                break;
        }
    }
}

loadLinks(nav, '- ', 0);

nav.appendChild(select);

var mobile = document.getElementById('mobile');

if(mobile.addEventListener) {
    mobile.addEventListener('change', function () {
        window.location.href = mobile.options[mobile.selectedIndex].value;
    });
} else if(mobile.attachEvent) {
    mobile.attachEvent('onchange', function () {
        window.location.href = mobile.options[mobile.selectedIndex].value;
    });
} else {
    mobile.onchange = function () {
        window.location.href = mobile.options[mobile.selectedIndex].value;
    }
}

}

这是我复制的脚本......然后我重命名了几个变量：

function selectnav_EP() {

var select = document.createElement('select');
var first = document.createElement('option');

first.innerHTML = 'Electric Playground Nav';
first.setAttribute('selected', 'selected');
select.setAttribute('id', 'mobile');
select.appendChild(first);

var nav = document.getElementById('nav_EP');
var loadLinks = function(element, hyphen, level) {

    var e = element;
    var children = e.children;

    for(var i = 0; i < e.children.length; ++i) {

        var currentLink = children[i];

        switch(currentLink.nodeName) {
            case 'A':
                var option = document.createElement('option');
                option.innerHTML = (level++ < 1 ? '' : hyphen) + currentLink.innerHTML;
                option.value = currentLink.href;
                select.appendChild(option);
                break;
            default:
                if(currentLink.nodeName === 'UL') {
                    (level < 2) || (hyphen += hyphen);
                }
                loadLinks(currentLink, hyphen, level);
                break;
        }
    }
}

loadLinks(nav, '- ', 0);

nav.appendChild(select);

var mobile = document.getElementById('mobile');

if(mobile.addEventListener) {
    mobile.addEventListener('change', function () {
        window.location.href = mobile.options[mobile.selectedIndex].value;
    });
} else if(mobile.attachEvent) {
    mobile.attachEvent('onchange', function () {
        window.location.href = mobile.options[mobile.selectedIndex].value;
    });
} else {
    mobile.onchange = function () {
        window.location.href = mobile.options[mobile.selectedIndex].value;
    }
}

}

在页脚中，我调用了这两个脚本。

这是我网站的确切页面 http://brianlueck.com/wordpress/electric-playground/

将您的浏览器窗口缩小到800px以下以查看响应式选择导航显示...您会注意到主导航菜单工作正常，但是，辅助导航菜单无法正常运行，因为它没有链接到它应链接到的页面。

有人可以帮忙吗？