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

侧边栏效果图:

解决sidenav菜单插件在手机浏览器上侧边栏不能关闭问题_第1张图片

问题场景:

该侧边栏插件在电脑浏览器和安卓手机上都能触发关闭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;/*添加光标属性*/
}

 

你可能感兴趣的:(CSS)