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

【问题标题】：Responsive Nav - Select Menu not linking响应式导航 - 选择菜单未链接
【发布时间】：2016-01-09 03:03:32
【问题描述】：

我有一个响应式网站，其导航更改为 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');

【问题讨论】：

不确定我是否理解这个问题。您正在尝试获取选择选项以在选择时导航到页面链接？
对不起，我说的不是很好，但是是的，那是正确的。当超过 800 像素时，它作为菜单工作正常。只要它在它下面进入选择菜单，它们就不会链接。但后来我想为子菜单项（↳ ）添加缩进，但我无法将两者都合并！？

标签： jquery html css select dropdown

【解决方案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 来选择元素，而不是通过标签来选择它们，这样它就不会对页面上的每个元素都这样做。

【讨论】：