欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-12 19:11:41
问题场景:该侧边栏插件在电脑浏览器和安卓手机上都能触发关闭fadeOut事件,但是在苹果ios上隐藏事件却完全没有反应。分析原因:div在苹果ios上没有click事件,所以触发不了$(document).click()解决办法:给div添加cursor:pointer光标属性,从而可以触发click事件,只需要简单修改css代码,如下:.sidenav {background: #212121;box-shadow: 2px 2px 6px rgba(0, 0, 0, ....

侧边栏效果图:

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

问题场景:

该侧边栏插件在电脑浏览器和安卓手机上都能触发关闭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

相关标签: CSS