jquery - 响应式导航 - 选择菜单未链接

Question

我有一个响应式网站，其导航更改为 800 像素以下的选择列表。我使用的代码没有链接到任何页面 - 它丢失了原始链接。我需要添加什么才能使其工作？非常感谢您的帮助。

var options = '<option selected>Navigate to...</option>';
$('nav').find('a').each(function () {
var text = $(this).text(),
    depth = $(this).parent().parents('ul').length,
    depthChar = '',
    i = 1;
for (i; i < depth; i++) { depthChar += '&#8627;&nbsp;'; }
options += '<option>' + depthChar + text + '</option>';
});
$('<select />').append(options).appendTo('nav');

Answer 1

如果你想让选择选项重定向到一个链接，你首先需要保存链接标签中的href：link = $(this).attr('href')然后将其设置为选项的值：options += '<option value="' + link +'">' + depthChar + text + '</option>';

现在您可以在选择更改事件上访问该链接并设置窗口重定向：

$('select').change(function() {
    window.location.href = $(this).find("option:selected").val();
});

这是一个例子：https ://output.jsbin.com/zodepedive/

我建议您使用 ids 或 classes 来选择元素，而不是通过标签来选择它们，这样它就不会对页面上的每个元素都这样做。