移除类(如果移动）

remove class if mobile

本文关键字：移动 如果      更新时间：2023-09-26

如果是移动设备，我正试图删除某些a标签上的一个类，以防止触摸时出现悬停效果，使锚点难以在设备上使用。不确定为什么这不起作用，但遗憾的是，它不起作用但对li元素起作用。以下是结构和JS

HTML

<div class="slideRight">
                    <ul class="imageList imgListIntro">
                        <li><a href="img/res/golf/1-1.jpg"  data-lightbox="golf-1" data-title="Range" class="hvr-wobble-vertical"><img src="img/res/golf/1-1.jpg" class="animateHidden"></a></li>
                        <li><a href="img/res/golf/1-2.jpg" data-lightbox="golf-1" data-title="Scorecard" class="hvr-wobble-vertical"><img src="img/res/golf/1-2.jpg" class="animateHidden"></a></li>
                        <li><a href="img/res/golf/1-3.jpg" data-lightbox="golf-1" data-title="St. Andrews" class="hvr-wobble-vertical"><img src="img/res/golf/1-3.jpg" class="animateHidden"></a></li>
                        <li><a href="img/res/golf/1-4.jpg" data-lightbox="golf-1" data-title="Challenge" class="hvr-wobble-vertical"><img src="img/res/golf/1-4.jpg" class="animateHidden"></a></li>
                    </ul>
                </div>

JS-

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  $('#toursButtons li').removeClass('hvr-wobble-vertical');
  $('#mainTourNav li').removeClass('hvr-wobble-vertical');
  $('.slideRight a').removeClass('hvr-wobble-vertical');
  $('#homeButtons li').removeClass('hvr-wobble-vertical');
}
正如Bruno在评论中提到的，媒体查询很可能是最合适的解决方案。然而，如果你必须"删除"一个类，而不仅仅是为较小的屏幕设计样式，我建议这样做： 
 $(window).bind('DOMContentLoaded load resize', function () {
  if ($(window).innerWidth() <= problemWidth) {
    $(element).removeClass('class');
  }
 });

粗糙且未经测试，但应该会给你正确的想法。

添加或删除类时，您正在应用和取消应用样式集合。如果您使用媒体查询来选择性地应用特定设备宽度的样式，这与添加和删除类本质上是一样的。

.class {    
   @media (min-width:<<YOUR MOBILE BREAKPOINT>>) {
     /* apply hover styles here */
   }
   @media (max-width:<<YOUR MOBILE BREAKPOINT - 1>>) {
     /* apply mobile specific non-hover styles here */
   }
}

在第一个媒体查询中应用悬停效果。如果您有特定于移动设备的样式来替换较大屏幕上的交互，请将其放入第二个查询中。如果你只是不想在手机上应用悬停样式而不添加任何内容，那么你不需要第二次媒体查询。

相关文章：