下拉菜单 select 无法在移动设备上正常工作

Question

我的下拉菜单在桌面上运行良好，但在移动设备上运行不佳。如果我 select 选项之一（A、B、C 等），对于移动设备，它对显示的框没有任何影响。

为什么？移动设备需要提交按钮吗？

脚本：

var $btns = $('.btn').click(function () {
    if (this.id == 'all') {
        $('#parent > span').fadeIn(250);
    } else {
        var $el = $('.' + this.id).delay(50).fadeIn(200);
        $('#parent > span').not($el).fadeOut(0);
    }
    $btns.removeClass('active');
    $(this).addClass('active');
})

jsfiddle

Answer 1

在 option 元素上放置 click 处理程序不是一个好主意，因为它没有得到广泛支持，事实上它在 Chrome 中根本不起作用，更不用说了移动浏览器，这就是导致您出现问题的原因。

而是挂钩到 select 元素上的 change 事件，并从选定的 option 中读取 id 属性。你需要修改你的逻辑，像这样：

$('select').change(function () {
    var selectedId = $('option:selected', this).prop('id')
    if (selectedId == 'all') {
        $('#parent > span').fadeIn(250);
    } else {
        var $el = $('.' + selectedId).delay(50).fadeIn(200);
        $('#parent > span').not($el).fadeOut(0);
    }
})

Updated fiddle

这同样适用于尝试设置所选 option 元素的样式 - 将其留给浏览器设置样式，因为大多数 CSS 属性对它们不起作用。

下拉菜单 select 无法在移动设备上正常工作

Dropdown select won't work correctly for mobile

jquery

jquery-mobile