Jquery 点击ipad的下拉菜单
我使用的是一个基于css3的下拉菜单。它基于css中提到的悬停。但是我需要在iPad上做这个工作,因为我的PAD不考虑悬停,NT在iPad上工作。 ipad有什么值得一提的特性吗。这将是伟大的,如果我们可以改变我现有的css只Jquery 点击ipad的下拉菜单,jquery,html,css,Jquery,Html,Css,我使用的是一个基于css3的下拉菜单。它基于css中提到的悬停。但是我需要在iPad上做这个工作,因为我的PAD不考虑悬停,NT在iPad上工作。 ipad有什么值得一提的特性吗。这将是伟大的,如果我们可以改变我现有的css只 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; char
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu</title>
<style>
/* Main menu */
.menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
.menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.menu li:hover > a
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu ul ul
{
top: 0;
left: 150px;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 10px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child a:hover
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu 3</a></li>
<li><a href="#">menu 4menu2menu2menu2menu2</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
菜单
/*主菜单*/
.菜单
{
宽度:100%;
保证金:0;
填充:10px0;
列表样式:无;
背景:#111;
背景:-莫兹线性梯度(#444,#111);
背景:-webkit渐变(线性、左下、左上、颜色停止(0,#111)、颜色停止(1,#444));
背景:-webkit线性梯度(#444,#111);
背景:-o-线性梯度(#444,#111);
背景:-ms线性梯度(#444,#111);
背景:线性梯度(#444,#111);
-moz边界半径:50px;
边界半径:50px;
-莫兹盒阴影:0 2px 1px#9c9c;
-网络工具包盒阴影:0 2px 1px#9c9c;
盒影:0 2px 1px#9c9c;
}
李先生
{
浮动:左;
填充:0 10px 0;
位置:相对位置;
线高:0;
}
.菜单a
{
浮动:左;
高度:25px;
填充:0 25px;
颜色:#999;
文本转换:大写;
字体:粗体12px/25px Arial,Helvetica;
文字装饰:无;
文本阴影:0 1px 0#000;
}
.菜单li:悬停>a
{
颜色:#fafafa;
}
.菜单li:悬停>ul
{
显示:块;
}
/*子菜单*/
.菜单ul
{
列表样式:无;
保证金:0;
填充:0;
显示:无;
位置:绝对位置;
顶部:35px;
左:0;
z指数:99999;
背景:#444;
背景:-莫兹线性梯度(#444,#111);
背景:-webkit渐变(线性、左下、左上、颜色停止(0,#111)、颜色停止(1,#444));
背景:-webkit线性梯度(#444,#111);
背景:-o-线性梯度(#444,#111);
背景:-ms线性梯度(#444,#111);
背景:线性梯度(#444,#111);
-莫兹盒阴影:0 0 2pxRGBA(255255255.5);
-webkit盒阴影:0 0 2pxRGBA(255255255.5);
盒影:0.02×rgba(255255255.5);
-moz边界半径:5px;
边界半径:5px;
}
.菜单
{
排名:0;
左:150px;
}
李先生
{
浮动:无;
保证金:0;
填充:0;
显示:块;
}
李:最后一个孩子
{
-莫兹盒阴影:无;
-webkit盒阴影:无;
盒影:无;
}
.菜单ul a
{
填充:10px;
高度:10px;
宽度:自动;
高度:自动;
线高:1;
显示:块;
空白:nowrap;
浮动:无;
文本转换:无;
}
.菜单ul a:悬停
{
背景:0186ba;
背景:-moz线性梯度(#04acec,#0186ba);
背景:-webkit渐变(线性、左上、左下、从(#04acec)到(#0186ba));
背景:-webkit线性梯度(#04acec,#0186ba);
背景:-o-线性梯度(#04acec,#0186ba);
背景:-ms线性梯度(#04acec,#0186ba);
背景:线性梯度(#04acec,#0186ba);
}
.菜单ul li:第一个孩子>a
{
-moz边界半径:5px5px0;
边界半径:5px5px0;
}
.菜单ul li:第一个孩子a:悬停
{
边框底色:#04acec;
}
.菜单ul li:第一个孩子a:悬停
{
右边框颜色:#04acec;
边框底色:透明;
}
.菜单ul li:最后一个孩子>a
{
-moz边界半径:0 0 5px 5px;
边界半径:0 0 5px 5px;
}
/*清除浮动元素*/
.菜单:之后
{
可见性:隐藏;
显示:块;
字号:0;
内容:“;
明确:两者皆有;
身高:0;
}
-
在触发touchstart和touchend事件时,尝试将类应用于li。并在css中使用该(.hover)以及:hover伪事件
例如在你的js中:
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$(".menu li a").bind('touchstart', function(){
$(this).addClass('hover');
});
$(".menu li a").bind('touchend', function(){
$(this).removeClass('hover');
});
}
您可以在if语句中执行
navigator.userAgent.match(/iP(hone | od | ad)/)
,而不是您执行的操作。