javascript - 仅在移动设备中添加活动课程

Question

我创建了一个响应式搜索按钮，一旦用户单击它就会打开一个表单，但在移动设备中，该表单应该会出现，而无需用户单击任何按钮。

我可以通过添加一个类来做到这一点，所以第一次单击菜单打开的按钮，第二次单击它将提交输入。

现在的障碍是在移动设备中添加活动类。最好的方法是什么？如果它被 userAgent 检测到是具有更大屏幕的移动设备（如平板电脑）。

我知道可以通过检测设备的屏幕尺寸来做到这一点，问题是什么对我的目的更有效，或者是否有任何其他方式可以实现这一目标。

这是代码的相关部分：

$(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
  event.preventDefault();
  var $form = $(this).closest('form'),
  $input = $form.find('input');
  $form.addClass('active');
  $input.focus();
});

标签： javascriptjquerymobile

Answer 1

if($(window).width()<768){
    $("body").addClass("mobileview");
} 
else {
    $("body").removeClass("mobileview");
}
// this is used whenever the window is resized
$(window).resize(function(){
  if($(window).width()<768){
        $("body").addClass("mobileview");
    } 
    else {
        $("body").removeClass("mobileview");
    }
});