jquery - .slideUp 仅适用于移动设备

Question

我创建了一个带有旋转木马导航的 Flexslider。导航被设计为移动屏幕尺寸的垂直列表。

在移动设备上:我想隐藏列表(点击的幻灯片标题除外)，以便用户可以看到所选的幻灯片。

在大屏幕上:我只想让简单的旋转木马导航像往常一样工作，但当然我的 slideUp 被应用了。

如何仅在移动设备上应用 jquery 功能？而且，
像这样的移动/桌面 jquery 共享标记的最佳做法是什么？

jquery:

$('a.current').bind('tapone',function(e){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
    $('#carousel ul.slides').slideUp({duration: 300, easing: "easeOutQuad"});
    } else {
  $(this).addClass('active');
  $('#carousel ul.slides').slideDown({duration: 300, easing: "easeOutQuad"});
}
});

标记:

  <div class="controls-container">
  <div class="row">
    <div id="carousel" class="flexslider large-12">
      <a class="current show-for-small"><h3>1994</h3></a>
      <ul class="slides">
        <li>1995</li>
        <li>1996</li>
        <li>1997</li>
      </ul>

更新:

我最终使用了 Modernizer 并向 html 标签添加了一个类。

if (Modernizr.mq('only all and (max-width: 768px)')) {
   $('html').addClass('sm-med');
}

并有条件地触发一些 JS:

if($(window).width() < 768) { ... }

Answer 1

不要使用 $.browser。您应该使用屏幕宽度，就像您使用 CSS 的媒体查询一样。在 JS 中使用与媒体查询相同的断点(如果有的话)，这样无论使用何种设备，所有用户都可以获得流畅的体验。

如果您担心设备/浏览器是否具有某些功能，您应该使用像 Modernizer 这样的检测库.

if($(window).width() < 768) {
    // code for things smaller than ipads
}