场景描述
在做手机端页面时,ui给了一个交互效果是在点击时添加某种样式,点击释放后此样式消失。
解决办法
使用jQuery的on方法给元素绑定touchstart事件监听器,当触发touchstart事件时,使用jQuery的addClass方法给元素添加触摸样式。同时给此元素绑定touchend事件监听器,使用jQuery的removeClass方法来移除触摸样式。
具体代码如下:
// 触摸时添加
$('.nav-item').on('touchstart', function() {
$(this).addClass('nav-active')
});
// 释放后移除
$('.nav-item').on('touchend', function() {
$(this).removeClass('nav-active')
});