Deprecated: Function create_function() is deprecated in /www/wwwroot/cn09.com/wp-load.php on line 2
在ios设备中隐藏弹出菜单 | 在ios设备中隐藏弹出菜单 – 第九区

第九区

一个程序员的经验笔记

在ios设备中隐藏弹出菜单

| 暂无评论

我试图在ipad和iphone上展示我的一个网站,发现一个弹出菜单有兼容问题:这个菜单写得很简单,就是鼠标掠过(mouseover)标题按钮显示菜单,鼠标离开(mouseleave)菜单和按钮时菜单隐藏。但是我们知道,触摸屏是没有mouseleave状态的,所以,这个菜单弹出后就不会隐藏了。我同时测试了一下安卓设备,安卓下没有这个问题,只要点击页面的任意位置菜单就会隐藏。
于是我增加一些代码:

$(function(){
   //用户菜单
   $('#userbutton').click(function(){
       userMenu();
   });
   $('#userbutton').mouseover(function(){
       userMenu();
   });
   $('#userblock').mouseleave(function(){
       userMenu();
   });   
});

function userMenu(){
    var menuStatus=$('#userbutton').attr('status');
    if(menuStatus==0){
            $('.usermenu').show();
            $('.userbutton').css('background','url("/css/userbutton_focus.png") no-repeat');
            $('#userbutton').attr('status',1);
    }else{
            $('.usermenu').hide();
            $('.userbutton').css('background','url("/css/userbutton.png") no-repeat');
            $('#userbutton').attr('status',0);
    }
}

这样,如果ios的用户发现菜单没有关闭,习惯动作会去尝试点击标题按钮,click动作会把菜单重新隐藏起来。

对应的html代码是这样的:

<div class="top">
            <div class="mainmenu">
                <h1><?=SITE_NAME?></h1>
                <span class="links">
                    <a href="#">首页</a>
                    <a href="#">aa</a>
                    <a href="#">bb</a>
                    <a href="#">cc</a>
                </span>
                <div id="userblock" class="userblock">
                    <a href="#" id="userbutton" class="userbutton" status=0>尚未登录</a>
                    <div class="usermenu nologin">
                        <a href="/user/login">登录</a>
                        <a href="/user/register">注册</a>
                        <a href="/user/forget">忘记密码</a>
                    </div>
                </div>
            </div>
        </div>

 

 

发表评论

*为必填字段!