我在浏览器窗口较小时使用jQuery将导航菜单转换为选择列表,以实现响应式设计。但是,在基于Webkit的浏览器上选择选项列表的选项重定向到Firefox和Opera中的相应页面,选择一个选项不起作用。
现场演示 - http://emoeco.com
$('ul.menu').each(function(){
var action="loadPage(this.form.elements[0])";
var form=$(document.createElement('form')).insertBefore($(this));
$(form).attr({
method: 'post'
});
var select=$(document.createElement('select')).appendTo(form);
$(select).attr("onchange", action);
$('>li a', this).each(function(){
var a=$(this).click(function(){
window.location.href=this.href;
}),
option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function(){
a.click();
});
});
});
答案 0 :(得分:1)
首先,您应该打开JavaScript控制台并查看错误。其中大多数是由于找不到文件。
其次,只是看着头部标签让我死了一点。我知道这不是你问题的目的,但你通过加载相同的东西两次或更多来创造巨大的开销。请花5分钟来解决这个问题;该网站将加载一百万倍
第三,如果我理解你的问题,你应该以用户必须单击按钮遍历页面的方式进行。另外,为什么不缩放菜单,而不是完全删除菜单?
第四,如果你不喜欢Thirds,为什么不抛弃整个锚点,只使用select的原生'change'事件?
$('select').change(function() {
location.href = $(this).children('option:selected').val();
});
编辑:至于为什么它只在WebKit中不起作用,这是因为它们没有将click事件与'option'元素联系起来。至少我的想法是:你可以尝试this example(添加/编辑网址以查看源代码。)在FireFox中测试过,在Chrome中没有任何内容