1

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

现在，我正在尝试将 SECOND 响应式选择导航添加到几个页面（显然包括主导航菜单的页面）。我复制了脚本（用于使主导航菜单成为选择导航的脚本），并尝试重命名几个变量以使辅助导航菜单响应响应（类似于主导航菜单）。当视口低于 800 像素时，辅助导航菜单会出现响应式选择导航，但是，当您从此菜单中选择辅助页面时，什么也不会发生。用户不会被带到新的二级页面。

你能帮我解决这个问题吗？

我尝试设置一个 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/

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

任何人都可以帮忙吗？

4

0 回答 0