jquery - 使用 jQuery 在触控/移动设备上进行悬停交互
问题描述
我正在使用 jquery 来显示要悬停的链接的内容,当单击相同的链接时,它们会向下滚动到包含更多内容的适当 div。这似乎在笔记本电脑和台式机上运行良好。
我在使用移动设备或触摸设备时遇到问题,因为悬停功能不起作用。发生的情况是,触摸链接后,会暂时显示悬停文本,然后向下滚动到 div。是否可以将向下滚动延迟 5 秒,以便显示文本然后向下滚动。
或者我们只能将哪些其他替代品用于触摸和移动设备?
$(".o-c").click(function() {
$('html, body').animate({
scrollTop: $(".one").offset().top
}, 2000);
});
$(".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();
});
.left {
width: 50%;
float: left;
background: red;
height: 100vh;
}
.right {
width: 50%;
float: right;
background: green;
height: 100vh;
}
.one {
width: 100%;
background: yellow;
height: 100vh;
display: block;
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="left">
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="o-c default-underline custom-scroll-link" href="#one" data-toggle="my-scrollspy-2">1</a></li>
<li class="pivot-nav-item"><a class="c-f custom-scroll-link" href="#" data-toggle="my-scrollspy-2">2</a></li>
<li class="pivot-nav-item"><a class="i-c custom-scroll-link" href="#" data-toggle="my-scrollspy-2">3</a></li>
</ul>
</div>
<div class="right">
<p class="home-i-t" style="display: block;">TEXT.</p>
<p class="home-o-c" style="display: none;">TEXT More.</p>
<p class="home-c-f" style="display: none;">2</p>
<p class="home-i-c" style="display: none;">3</p>
</div>
<div class="one">
Some more TEXT HERE
</div>
解决方案
是否可以将向下滚动延迟 5 秒,以便显示文本然后向下滚动。
是的,这是可能的。
您只需要执行两个步骤:
- 防止链接点击的默认行为使用
preventDefault();
- 使用 设置超时
setTimeout();
,之后浏览器响应链接点击
工作示例:
const sectionLinks = document.querySelectorAll('.links li a');
const textParagraph = document.querySelector('.text p');
sectionLinks.forEach((sectionLink) => sectionLink.addEventListener('click', (e) => {
// PREVENT THE DEFAULT LINK CLICK BEHAVIOUR
e.preventDefault();
// ADD THE TEXT
textParagraph.textContent = 'You clicked the ' + e.target.textContent + '...';
// DUPLICATE THE STANDARD LINK CLICK BEHAVIOUR (AFTER A TIMEOUT)
setTimeout(() => {window.location.href = e.target.href}, 1000);
}, false));
:root {
scroll-behavior: smooth;
}
body {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 400px 400px 400px 400px;
color: rgb(255, 255, 255);
}
a {
color: rgb(255, 255, 255);
}
li {
line-height: 36px;
}
div {
padding: 12px 0;
}
h2, p {
padding-left: 12px;
}
.section {
grid-column: 1 / 3;
}
.links {
background-color: rgb(255, 0, 0);
}
.text {
background-color: rgb(0, 127, 0);
}
#section-a {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 0);
}
#section-b {
background-color: rgb(255, 127, 0);
}
#section-c {
background-color: rgb(0, 0, 191);
}
<div class="links">
<ul>
<li><a href="#section-a">Link to Section A</a></li>
<li><a href="#section-b">Link to Section B</a></li>
<li><a href="#section-c">Link to Section C</a></li>
</ul>
</div>
<div class="text"><p>Text Here...</p></div>
<div id="section-a" class="section"><h2>Section A</h2></div>
<div id="section-b" class="section"><h2>Section B</h2></div>
<div id="section-c" class="section"><h2>Section C</h2></div>
推荐阅读
- javascript - 如何检测用户单击浏览器后退按钮时触发的事件
- python - 列表中的 Python 值作为其他列表的参数
- java - GSON fromJson 没有为 Java 字段赋值
- python - 如何在散景图中设置文本字体?
- ruby-on-rails - [Google::Apis::DriveV3 ]获取上传文件地址
- laravel - OctoberCMS (Laravel) + Vue.js + Tailwind CSS 最佳设置
- advanced-custom-fields - 将 ACF 字段添加到 Post Edit Admin Page / edit.php
- android - 使用 react-native run-android 运行时出现 React-Native 错误
- android - 如何在 DialogFragment 中正确使用 Android 视图绑定?
- html - 更改选择元素的占位符文本的颜色