更改:悬停在手机/触摸设备上的点击/点击功能不工作 [英] change :hover to click/tap function on mobile/touch devices not working
问题描述
所以,我试图改变:hover
函数为一个点击函数使用Modernizr的 no-touch
/ touch
类的特定元素(字幕)。在理论上,这应该可以工作,但不知何故在移动/触摸设备上只能点击一次,这意味着如果我再次点击/点击它,它不会取消悬停 。我可以通过点击页面上的另一个元素悬停,但是当< figure>
再次点击/点击时,非常希望标题消失。
So, I'm trying to change the :hover
function to a click function using Modernizr's no-touch
/touch
class for specific elements (captions) on a page. And in theory, this should work, but somehow it's only clickable once on a mobile/touch device, meaning that if I click/tap it again, it won't "un-hover". I can "un-hover" by tapping at another element on the page, but would very much like the caption to disappear when <figure>
clicked/tapped again.
如果我更改js,以使它是 no-touch
设备点击,它工作正常。我在这里缺少什么?
If I change the js so that it's the no-touch
devices having to click, it works fine. What am I missing here?
小提琴: https ://fiddle.jshell.net/bh3aLkcL/3/
我恐怕我的js技能相当不好说最少(阅读:non - 存在),我一直在使用来自另一篇文章的代码段:将悬停互动更改为点击触摸屏设备
I'm afraid my js skills are quite poor to say the least (read: non-existing), and I've been using a snippet from another post: Change hover interaction to click for touch screen devices
其余的工作,所以这只是一回事。非常感谢任何帮助!
The rest works, so it's just that one thing. Any help is greatly appreciated!
JavaScript:
// For hovering becoming click via Modernizr
//$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
!$('body').hasClass('no-touch') ? event = 'mouseenter mouseleave' : event = 'click';
$('.design-section figure').on(event, function () {
$(this).toggleClass('open');
});
HTML:
<section id="work" class="content-section text-left" data-offset="100px">
<div class="design-section">
<div class="container">
<div class="col-lg-8 col-lg-offset-2">
<img src="http://cutepuppyclub.com/wp-content/uploads/2015/05/White-Cute-Puppy-.jpg" width="100%" class="img-responsive" alt="Playing the dilemma game">
<figure>
<figcaption>
<p>test text</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
CSS :
figure {
padding: 0;
margin-top: 0;
position: relative;
display: block;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0,0,0,.3);
color: #fff;
}
figure.open figcaption {
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
opacity: 1;
}
.design-section figcaption {
opacity: 0;
bottom: -30%;
left: 0;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
padding: 0;
width:100%;
display:block;
}
.design-section figure {
height:120px;
margin-top:-120px;
z-index:1;
}
.design-section img {
padding-top:0;
margin-top:14px;
z-index:0;
}
.design-section figcaption p {
margin:0;
padding: 1.5% 2.5%;
font-size:15px;
}
.design-section figure.open figcaption{
bottom: 0;
}
我使用的是Bootstrap,但在这件事上不应该有什么要说的。
P.S. I'm using Bootstrap, but that shouldn't have anything to say in this matter.
推荐答案
使用Modernizr检查触摸事件,您可以这种方式:
You don't need to use Modernizr for checking touch events, you could do it this way:
var event = ('ontouchstart' in window) ? 'click' : 'mouseenter mouseleave';
$('.design-section figure').on(event, function () {
$(this).toggleClass('open');
});
此外,您使用 Conditional(ternary)Operator
错了,我修好了。阅读正确语法。
Also, your using of Conditional (ternary) Operator
is wrong, I fixed it. Read about right syntax.
这篇关于更改:悬停在手机/触摸设备上的点击/点击功能不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!