jquery - 将悬停功能更改为在移动设备上单击/触摸
问题描述
我目前有在台式机/笔记本电脑上悬停链接时显示的内容。我如何将其更改为点击触摸/移动设备,因为有时我需要在链接上双击以显示内容?
我正在使用下面的代码来识别用户是否触摸了屏幕以更改为单击功能
window.addEventListener('touchstart', function onFirstTouch() {
// we could use a class
document.body.classList.add('user-is-touching');
// or set some global variable
window.USER_IS_TOUCHING = true;
// or set your app's state however you normally would
$(".o-c").hover(function() {
$('.home-o-c').show();
$('.home-i-t').hide();
}, function() {
$('.home-o-c').hide();
$('.home-i-t').show();
});
$(".c-f").hover(function() {
$('.home-c-f').show();
$('.home-i-t').hide();
}, function() {
$('.home-c-f').hide();
$('.home-i-t').show();
});
$(".i-c").hover(function() {
$('.home-i-c').show();
$('.home-i-t').hide();
}, function() {
$('.home-i-c').hide();
$('.home-i-t').show();
});
$(".c-u").hover(function() {
$('.home-c-u').show();
$('.home-i-t').hide();
}, function() {
$('.home-c-u').hide();
$('.home-i-t').show();
});
window.addEventListener('touchstart', function onFirstTouch() {
// we could use a class
document.body.classList.add('user-is-touching');
// or set some global variable
window.USER_IS_TOUCHING = true;
// or set your app's state however you normally would
// we only need to know once that a human touched the screen, so we can stop listening now
window.removeEventListener('touchstart', onFirstTouch, false);
}, false);
$(".o-c").click(function() {
if ($('body').hasClass('user-is-touching')) {
$('.home-o-c').show();
} else {
$('html, body').animate({
scrollTop: $(".our-company").offset().top
}, 2000);
}
});
$(".c-f").click(function() {
if ($('body').hasClass('user-is-touching')) {
$('.home-c-f').show();
$('.home-o-c').hide();
$('.home-i-c').hide();
$('.home-c-u').hide();
$('.home-i-t').hide();
} else {
$('html, body').animate({
scrollTop: $(".cf2").offset().top
}, 2000);
}
});
.left-fill {
background: #0000006b;
height: 100vh;
}
.right-fill {
background: pink;
height: 100vh;
}
.vc_col-sm-6 {
width: 50%;
float: left;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
text-align: left;
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
line-height: 40px;
}
.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
width: 100%;
}
.pivot-nav:hover a.default-underline:not(:hover)::after {
width: 0;
}
.pivot-nav li a::after {
bottom: 0;
content: "";
display: block;
height: 4px;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s;
width: 0;
}
.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
display: none;
}
.our-company {
clear: both;
display: block;
height: 50vh;
}
.cf2 {
clear: both;
display: block;
height: 50vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<p class="home-i-t">TEXT One</p>
<p class="home-o-c">TEXT One</p>
<p class="home-c-f">TExt for C f.</p>
<p class="home-i-c">Some more text fo i c.</p>
<p class="home-c-u">Get in touch </p>
</div>
</div>
<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">
<div class="wpb_wrapper">
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="o-c default-underline" href="#" data-toggle="my-scrollspy-2">O C</a></li>
<li class="pivot-nav-item"><a class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
<li class="pivot-nav-item"><a class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
<li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a class="c-u" href="#">C U</a></li>
</ul>
</div>
</div>
<div class="our-company">
Our Company Scroll Down
</div>
<div class="cf2">
cf2 Scroll Down
</div>
</body>
解决方案
推荐阅读
- git - 每个 PR 都会有一个 git commit。如何清理 git 提交历史?
- ios - 如何以编程方式访问 iOS 13 中的应用程序语言?
- google-apps-script - Google Apps 脚本 -- 隐藏“运行脚本”通知
- mysql - SQL 语句运行缓慢
- c# - 从 POST 请求中使用嵌套的 JSON,无法将嵌套的 JSON 分配给我的班级
- keycloak - CAS 6.1 - Pac4J 的状态参数为空
- c - 用另一个指针强制转换的结构指针
- java - 如何在使用并行方法时使 forEach 循环线程中的单个任务安全?
- spring - 尝试在 Spring Boot 2.1 中下载没有扩展名的文件时出现 404
- javascript - 尝试在 Excel API 中锁定或解锁一系列单元格时,为什么会出现 AccessDenied