Question

我正在使用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>

Answer 1

是否可以将向下滚动延迟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>

使用jQuery在触摸/移动设备上悬停交互

1 个答案: