[英]jquery append class with hover AND touch for mobile device
我正在使用下面的腳本將類“懸停”添加到具有“顯示區域”類的 div。
jQuery(document).ready(function(){
$(".reveal-area").hover(
function () {
$(this).addClass("reveal-show");
},
function () {
$(this).removeClass("reveal-show");
}
);
});
這在 PC 上運行良好 - 但是如何添加一個功能以在移動設備上包含觸摸激活(以附加類)? 謝謝
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
}
});
也許嘗試這樣的事情:
$(".reveal-area").click(
$(this).toggleClass("reveal-show");
});
您可以通過識別屏幕寬度並將事件偵聽器附加到您的類.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");
})
})
我想你需要這樣的東西
(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.