У меня есть контент, который отображается при наведении ссылки на настольный ПК или ноутбук. Как я могу изменить это, чтобы нажимать на сенсорные / мобильные устройства, так как иногда мне нужно дважды щелкнуть по ссылке, чтобы показать контент?
Я использую код ниже, чтобы определить, является ли пользователькоснулся экрана, чтобы перейти к функции щелчка
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>