html判断元素可见性,使用zepto时如何判断元素的可见性【原创】

最近在做移动端的项目，所以多的使用’轻量级zepto.js，现在的问题是，我需要显示-隐藏一个div,一般是判断此div是否是可见的，再显示或隐藏，测试一个页面上的是可见的还是不可见的，一般使用$(‘div).is(:visible), 然而zepto.js不支持：visible, 所以，必须换种方式判断：

(1)可以检查显示器的CSS属性：css(“display”) == “block”

(2)可以检查可见：可见/隐藏：css(“visibility”) == “visible”

例子如下：

//评价隐藏-显示

$('.comment-btn').click(function(){

if($('.hideComment').css("display") == "none"){

$('.hideComment').show();

$('.btnarrow').removeClass('btnarrowtop');

$('.btnarrow').addClass('btnarrowdown');

}else if($('.hideComment').css("display") == "block"){

$('.hideComment').hide();

$('.btnarrow').addClass('btnarrowtop');

$('.btnarrow').removeClass('btnarrowdown');

}

});

在移动端项目中，有很多东西和电脑网页上的不同，

一、例如tap()和click()(手机上点击事件的300ms延迟问题)

二、如：当用户手指放在移动设备在屏幕上滑动会触发的touch事件，touchstart()、touchmove()、touchend()等。

三、关于文件上传控件的accept 属性：

四、android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a{

-webkit-tap-highlight-color: rgba(0,0,0,0);

outline: none;

text-decoration: none;

}

五、我们常见select控件在ios系统下，出现自带的滚动效果，而安卓系统则无那种效果

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/13407.html

微信打赏

支付宝打赏

感谢您对作者Sylvia的打赏，我们会更加努力！    如果您想成为作者，请点我