Javascript 用于移动设备的带悬停和触摸的jquery附加类

我正在使用下面的脚本将一个类“hover”添加到一个具有类“reveal area”的div中

jQuery(document).ready(function(){  
   $(".reveal-area").hover(
      function () {
         $(this).addClass("reveal-show");
      },
      function () {
         $(this).removeClass("reveal-show");
      }
   );
});

---

这在PC上运行良好-但我如何才能在移动设备上添加包含触摸激活（附加类）的功能？谢谢

也许可以试试这样的东西：

$(".reveal-area").click(
    $(this).toggleClass("reveal-show");
});

---

您可以通过标识屏幕宽度并将事件侦听器附加到类

。显示区域

jQuery(document).ready(function() {
    if (window.innerWidth < 480) { //change this value for your convenience
        $(".reveal-area").click(function() {
            $(this).toggleClass("reveal-show");
        })
    }

    $(".reveal-area").hover(function() {
        $(this).toggleClass("reveal-show");
    })
})

jQuery（文档）.ready（函数（）{
如果（window.innerWidth<480）{//为方便起见，请更改此值
$（“.discover area”）。单击（函数（）{
$（this.toggleClass（“展示”）；
})
}
$（“.reveal area”）.hover（函数（）{
$（this.toggleClass（“展示”）；
})
})
我想你需要这样的东西


（函数（$）{
"严格使用",；
$（文档）.ready（函数（）{
//检查设备类型
函数设备类型（）{
var mobile=false；
//触摸IOS和Android
var isAndroid=/（android）/i.test（navigator.userAgent）；
var isMobile=/（mobile）/i.test（navigator.userAgent）；
if（navigator.userAgent.match（/（iPod | iPhone | iPad）/）| | isAndroid | | isMobile）{
移动=真；
}否则{
mobile=false；
}
返回手机；
}
//桌面悬停
函数itemHover（）{
$（“.reveal area”）。悬停(
函数（）{
$（this.addClass（“展示”）；
},
函数（）{
$（this.removeClass（“展示”）；
}
);
}
//移动触摸
函数itemTouch（）{
$（“显示区域”）。在（“touchstart”上，函数（）{
$（“.diseal area”）.removeClass（'diseal-show'）；
$（this.addClass（“展示”）；
//如果您需要工作链接，请对此进行评论
返回false；
});
}
函数itemInit（）{
var mobile=deviceType（）；
//检查设备类型
if（mobile==true）{
//如果是移动的
itemTouch（）；
}否则{
//如果桌面
itemHover（）；
}
}
//调用函数
itemInit（）；
});
}（jQuery））
。显示区域{
背景：#000；
宽度：100%；
高度：200px；
}
.展示秀{
背景：红色；
}

感谢您的回答Dharani-但我不知道如何实现这一点，以便在移动设备上，在触摸屏上，此div更改为。非常感谢。嗨-问题-展示容器有链接！在您的示例中，div“diseal area diseal show”向上滑动并显示一个链接（有6个单独的“diseal area”容器）。因此，移动功能的“$（this）.toggleClass（“显示显示”）意味着您不能触摸链接。我已经将其更改为“$（this）.addClass（“reveal show”）”，这是可以的-但是当我触摸其他6个“reveal”容器中的任何一个时，我需要一种删除“reveal show”类的方法…类似于“.而不是（this）removeClass”。（因此，不止一个“展示区”永远无法打开）但我不知道如何做到这一点！谢谢给我你的HTML，我会帮你的。编辑不起作用-这里是HTML，其中6个：编辑，请检查它是否是你想要的。
Use touchstart function
$('.reveal-area').on("touchstart", function (e) {
     'use strict'; //satisfy code inspectors
   var link = $(this); //preselect the link
   if (link.hasClass('hover')) {
     return true;
      $(this).addClass("reveal-show");
   } 
  else {
  link.addClass('hover');
  $('.reveal-area').not(this).removeClass('hover');
    e.preventDefault();
     $(this).removeClass("reveal-show");
    return false; //extra, and to make sure the function has consistent     
    return points
  }
});

$('ul li.has-children').on("touchstart", function (e) {
  'use strict'; //satisfy code inspectors
   var link = $(this); //preselect the link
   if (link.hasClass('hover')) {
     return true;
   } 
  else {
  link.addClass('hover');
  $('ul > li').not(this).removeClass('hover');
    e.preventDefault();
    return false; //extra, and to make sure the function has consistent     
    return points
  }
});