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

Question

I'm using the script below to add a class 'hover' to a div with the class 'reveal-area'.我正在使用下面的脚本将类“悬停”添加到具有“显示区域”类的 div。

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

This works fine on PC - but how can I add a function to include a touch activation (to append the class) on a mobile device?这在 PC 上运行良好 - 但是如何添加一个功能以在移动设备上包含触摸激活（以附加类）？ thanks谢谢

Answer 1

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
  }
});

Answer 2

Maybe try something like this:也许尝试这样的事情：

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

Answer 3

You can do this by identifying the screen width and attaching an event listener to you class .reveal-area您可以通过识别屏幕宽度并将事件侦听器附加到您的类.reveal-area来做到这一点

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");
    })
})

Answer 4

I think you need something like this我想你需要这样的东西

 (function ($) { 'use strict'; $(document).ready(function() { //check device type function deviceType() { var mobile = false; //touch on IOS and 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 = true; }else { mobile = false; } return mobile; } //desktop hover function itemHover() { $(".reveal-area").hover ( function () { $(this).addClass("reveal-show"); }, function () { $(this).removeClass("reveal-show"); } ); } //mobile touch function itemTouch() { $(".reveal-area").on("touchstart", function () { $(".reveal-area").removeClass('reveal-show'); $(this).addClass("reveal-show"); //if you need working links comment this return false; }); } function itemInit() { var mobile = deviceType(); //check device type if(mobile == true) { //if mobile itemTouch(); } else { //if desktop itemHover(); } } //call function itemInit(); }); }(jQuery));

 .reveal-area { background: #000; width: 100%; height: 200px; } .reveal-show { background: red; }

 <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="hero-item"> <div class="img-area"> <img src="image.jpg" alt="image alt"></div> <div class="reveal-area"> <img src="link-here.png" class="reveal-button"> <a href="/marine/" class="link-here">Text here...</a> <a href="/marine/" class="reveal-but">Learn more</a> </div> <!-- end reveal-area --> <div class="reveal-area"> <img src="link-here.png" class="reveal-button"> <a href="/marine/" class="link-here">Text here...</a> <a href="/marine/" class="reveal-but">Learn more</a> </div> <!-- end reveal-area --> </div> <!-- end hero item 1--> </div> <div class="hero-item"> <div class="img-area"> <img src="image.jpg" alt="image alt"></div> <div class="reveal-area"> <img src="link-here.png" class="reveal-button"> <a href="/marine/" class="link-here">Text here...</a> <a href="/marine/" class="reveal-but">Learn more</a> </div> <!-- end reveal-area --> <div class="reveal-area"> <img src="link-here.png" class="reveal-button"> <a href="/marine/" class="link-here">Text here...</a> <a href="/marine/" class="reveal-but">Learn more</a> </div> <!-- end reveal-area --> </div> <!-- end hero item 1--> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>

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

问题描述

4 个解决方案

解决方案1
1 2016-09-24 11:36:26

解决方案2
0 2016-09-24 11:27:38

解决方案3
0 2016-09-24 11:33:20

解决方案4
0 已采纳 2016-09-24 14:38:23

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

问题描述

4 个解决方案

解决方案1 1 2016-09-24 11:36:26

解决方案2 0 2016-09-24 11:27:38

解决方案3 0 2016-09-24 11:33:20

解决方案4 0 已采纳 2016-09-24 14:38:23

解决方案1
1 2016-09-24 11:36:26

解决方案2
0 2016-09-24 11:27:38

解决方案3
0 2016-09-24 11:33:20

解决方案4
0 已采纳 2016-09-24 14:38:23