sidenav是一款簡潔時尚的jQuery和CSS3側邊欄選單外掛。該側邊欄外掛具有手風琴的多級選單效果，使用簡單，效果簡潔大方。外掛下載連結 該側邊欄外掛在電腦瀏覽器和安卓上都能觸發事件，但是在ios上隱藏事件卻完全沒有反應。 一、問題原因 把sidenav.min.js扒出來看看

! function(a) {
	"use strict";
	function b(b, d) {
		this.$el = a(b), this.opt = a.extend(!0, {}, c, d), this.init(this)
	}
	var c = {};
	b.prototype = {
		init:
 
 function(a) {
			a.initToggle(a), a.initDropdown(a)
		},
		initToggle: function(b) {
			a(document).on("click", function(c) {
				var d = a(c.target);
				d.closest(b.$el.data("sidenav-toggle"))[0] ? (b.$el.toggleClass("show"), 
				a("body").toggleClass("sidenav-no-scroll"), 
				b.toggleOverlay())
 
 : d.closest(b.$el)[0] || (b.$el.removeClass("show"),//
				a("body").removeClass("sidenav-no-scroll"), 
				b.hideOverlay())
			})
		},
		initDropdown: function(b) {
			b.$el.on("click", "[data-sidenav-dropdown-toggle]", function(b) {
				var c = a(this);
				c.next("[data-sidenav-dropdown]").slideToggle
 
("fast"), c.find("[data-sidenav-dropdown-icon]").toggleClass("show"), b.preventDefault()
			})
		},
		toggleOverlay: function() {
			var b = a("[data-sidenav-overlay]");
			b[0] || (b = a('<div data-sidenav-overlay class="sidenav-overlay"/>'), a("body").append(b)), b.fadeToggle("fast")
		},
		hideOverlay: function() {
			a("[data-sidenav-overlay]").fadeOut("fast")
		}
	}, a.fn.sidenav = function(c) {
		return this.each(function() {
			a.data(this, "sidenav") || a.data(this, "sidenav", new b(this, c))
		})
	}
}(window.jQuery);

拆分一下事件流程，發現<div data-sidenav-overlay class="sidenav-overlay"/><div>這個磨砂層觸發不了click(),百度一下，原來是 div在ios上沒有click事件觸發不了$(document).click() 。

二、解決問題 給div加cursor屬性，觸發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;
	/*新增相容各瀏覽器字首*/
	-moz-transition: ransform .3s;
	-webkit-transition: ransform .3s;
	-o-transition: ransform .3s;
	top: 0;
	width: 256px;
	z-index: 100
}

.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;/*游標屬性*/
}

新增cursor屬性後，在電腦瀏覽器、安卓和ios上都能觸發事件，但會出現click點選樣式，這就有點不好看了（無視中…）。

注：簡單記錄一下備用，如有更好的解決辦法，希望大家留言。