在移动设备上展开折叠菜单，同时在桌面上保持悬停

Question

我的桌面上有一个 html 页面，它在悬停时使用垂直滑动菜单。在 iPad 上，我可以单击菜单将其展开，但我不知道如何使其折叠。我曾尝试使用 jquery，但似乎无法使其正常工作。这是我开始的代码。

#navigation_slideout {
	position: fixed;
	top: 80px;
	left: -370px;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	transition-duration: .5s;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	box-shadow: 0 0 40px #222;
}

 #navigation_slideout:hover {
  left: -39px;
}

#navigation_slideout ul
 {
 list-style: none;
 }

#navigation_slideout ul li {
	background: #548EBE;
	width: 325px;
	height: 30px;
	text-align: left;
	padding-top: 5px;
	font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 12pt;
	color:white;
	font-weight:bold;

}
#navigation_slideout ul li a{
	color: #000;
	text-decoration: none;
	font-weight:bold;
	display: block;
	background-color:#548EBE;
	color:white;
}
#navigation_slideout ul li ul{ 

width:285px;
}

#navigation_slideout ul li ul li { 

width:10px;
position:relative;
left:-41px;
}


#navigation_slideout ul li ul li a { 
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family:  helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}

#menu{
 	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg); 
	transform: rotate(-90deg); 
	font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 14pt;
	color:white;
	font-weight:bold;
	 margin:0px 0px 0px 0px;
	right:0px;
	padding:0px 0px 0px 0px

}

#menu a{
 	font-size: 14pt;
	color:white;
	font-weight:bold;
	text-decoration:none;
}

table.nospacing { 
border-collapse: collapse;
	border-spacing: 0;
    table-layout: fixed;


} 
table.nospacing th, td {
 padding: 0;
  }
  .menu-col{max-width: 30px;}

<div id="navigation_slideout" style="background-color:#548EBE;z-index:1" >
<table class="nospacing" style="border-style:none">
<tr>
<td>

		<ul>
			<li><a href="default.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li>
			<li><a href="about/default.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a></li>
			<li><a href="contact/default.html" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacts</a></li>			
			<li><a href="faq/default.html" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAQs</a></li>
		</ul>
		<hr width="200px"/>
		<ul>
		<!-- #BeginEditable "redlines" -->
			<li style="display:none"><a href="#">&nbsp;&nbsp;&nbsp;Redlines</a></li>			
		<!-- #EndEditable -->			
		</ul>
		</td>
				<td   class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid"><p id="menu"><a href="#">MENU</a></p></td>

</tr>
</table>​

Answer 1

iDevices 有一个奇怪的地方，即悬停状态持续存在。我通过添加悬停类来解决这个问题。如果您使用的是 jquery，您可以这样做...

elem.on('mouseenter', function () {
    $(this).addClass('hover');
}

elem.on('mouseleave', function () {
    $(this).removeClass('hover');
}

还有其他修复...

http://davidwalsh.name/ios-hover-menu-fix

http://www.slickmedia.co.uk/news/blog/glenns-blog/fix-ipad-iphone-css-hover-issues/