当前位置： 移动技术网 > IT编程>开发语言>Java > 解决sidenav菜单插件在手机浏览器上侧边栏不能关闭问题

解决sidenav菜单插件在手机浏览器上侧边栏不能关闭问题

2020年07月27日  | 移动技术网IT编程  | 我要评论

侧边栏效果图：

问题场景：

该侧边栏插件在电脑浏览器和安卓手机上都能触发关闭fadeOut事件，但是在苹果ios上隐藏事件却完全没有反应。

分析原因：

div在苹果ios上没有click事件，所以触发不了$(document).click() 

解决办法：

给div添加cursor:pointer光标属性，从而可以触发click事件，只需要简单修改css代码，如下：

.sidenav {
	background: #212121;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, .3);
	display: block;
	font-size: 16px;
	font-weight: 400;
	height: 100%;
	left: 0;
	position: fixed;
	overflow: auto;
	transform: translate(-262px, 0);
	/*添加兼容各浏览器前缀*/
	-ms-transform: translate(-262px, 0);
	-moz-transform: translate(-262px, 0);
	-webkit-transform: translate(-262px, 0);
	-o-transform: translate(-262px, 0);
	transition: transform .3s;
	/*添加兼容各浏览器前缀*/
	-ms-transition: transform .3s;
	-moz-transition: transform .3s;
	-webkit-transition: transform .3s;
	-o-transition: transform .3s;
	top: 0;
	width: 256px;
	z-index: 9999
}

.sidenav.show {
	transform: translate(0, 0);
	/*添加兼容各浏览器前缀*/
	-ms-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-o-transform: translate(0, 0);
}

.sidenav-overlay {
	background: rgba(255, 255, 255, .8);
	display: none;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;
	cursor:pointer;/*添加光标属性*/
}

 

本文地址：https://blog.csdn.net/qq15577969/article/details/107557311

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网