移动端悬停菜单实现
来源：luqidong
发布时间：2014-05-07 19:56:25
点击数：
首先先看效果图：
类似淘宝的移动悬停菜单。这里有个注意点就是点击菜单之外的地方需要收起菜单，如果页面有标签连接的话就会进行跳转，所以此时要做的就是当悬停菜单出来的时候必须要定义一个层宽高是100%来填充满整个屏幕，来阻碍a标签点击的跳转。而且在移动端的点击时间不能用click这样的话会有冒泡延迟，正确的比较好的解决方案就是用touchstart与touchend之间的时间戳小于大约200ms，再次执行点击的方法。这样可以阻碍冒泡。具体看下一下的脚本：
//全局变量，触摸开始位置
var startY = 0;
//scrollstart事件
function scrollstartFunc(evt) {
try
{
var y = Number(evt.pageY); //页面触点Y坐标
startY = y; //记录触点初始位置
}
catch (e) {
alert('touchStartFunc：' + e.message);
}
}
function scrollmoveFunc(evt) {
try
{
}
catch (e) {
alert('touchMoveFunc：' + e.message);
}
}
function scrollendFunc(evt) {
try
{
var y = Number(evt.pageY); //页面触点Y坐标
if (y - startY < 0) {
//向上滑动
$("#headerId").addClass("header-fix").removeClass("none");
if($(document).scrollTop() == 0) {
$("#headerId").removeClass("none").removeClass("header-fix");
}
}
else if(y - startY > 0) {
//向下滑动
$("#headerId").addClass("none").removeClass("header-fix");
}
}
catch (e) {
alert('touchEndFunc：' + e.message);
}
}
//触及列表按钮-弹出或关闭首页等列表详细
function touchRgtHeadFunc(evt) {
try
{
if($("#ly_shade").hasClass("none")) {
$("#rgtHeadId").addClass("right-head-bg");
$("#headNavList").removeClass("none");
$("#ly_shade").removeClass("none");
} else {
$("#rgtHeadId").removeClass("right-head-bg");
$("#headNavList").addClass("none");
$("#ly_shade").addClass("none");
}
}
catch (e) {
alert('touchRgtHeadFunc：' + e.message);
}
}
//触及背景-关闭首页等列表详细
function touchBgShadeFunc(evt) {
try
{
if(!$("#ly_shade").hasClass("none")) {
setTimeout(function(){
$("#rgtHeadId").removeClass("right-head-bg");
$("#headNavList").addClass("none");
$("#ly_shade").addClass("none");
},220)
}
}
catch (e) {
alert('touchBgShadeFunc：' + e.message);
}
}
//初始加载
function myinit() {
//绑定上下滑动事件
$("#screeBgId").bind('touchstart', function () { scrollstartFunc(event); });
$("#screeBgId").bind('touchend', function () { scrollendFunc(event); });
// $("#screeBgId").bind('touchmove', function () { scrollmoveFunc(event); });
//触及列表按钮-弹出或关闭首页等列表详细
$("#rgtHeadId").bind('touchstart', function () { touchRgtHeadFunc(event); });
//触及背景-关闭首页等列表详细
$("#ly_shade").bind('touchstart', function () { touchBgShadeFunc(event); });
}
window.onload = myinit;