Question

我在浏览器窗口较小时使用jQuery将导航菜单转换为选择列表，以实现响应式设计。但是，在基于Webkit的浏览器上选择选项列表的选项重定向到Firefox和Opera中的相应页面，选择一个选项不起作用。

$('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();
                 });
                 });

                 });

Answer 1

首先，您应该打开JavaScript控制台并查看错误。其中大多数是由于找不到文件。

其次，只是看着头部标签让我死了一点。我知道这不是你问题的目的，但你通过加载相同的东西两次或更多来创造巨大的开销。请花5分钟来解决这个问题;该网站将加载一百万倍

第三，如果我理解你的问题，你应该以用户必须单击按钮遍历页面的方式进行。另外，为什么不缩放菜单，而不是完全删除菜单？

第四，如果你不喜欢Thirds，为什么不抛弃整个锚点，只使用select的原生'change'事件？

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

编辑：至于为什么它只在WebKit中不起作用，这是因为它们没有将click事件与'option'元素联系起来。至少我的想法是：你可以尝试this example（添加/编辑网址以查看源代码。）在FireFox中测试过，在Chrome中没有任何内容

jQuery生成的响应式选择菜单在Chrome中不起作用

1 个答案: