0
jQuery(document).ready(function(){
    /* for top navigation */

    jQuery("#menu ul, #menu li").css("-webkit-transform", "translateZ(0)");
    jQuery(" #menu ul ").css({display: "none"}); // Opera Fix
    jQuery(" #menu li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
    },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
    });

    jQuery(" #menu2 ul ").css({display: "none"}); // Opera Fix
    jQuery(" #menu2 li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
    },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
    });
});

此代码来自 dropdown.js,用于我在 www.yorkshirephotographer.net 上的导航菜单,我不得不添加第一行代码 - webkit 转换,因为该菜单在 Mac 和 IPAD 上无法正常运行。查看更多信息以及为什么我在此处添加此代码行 -

JavaScript 下拉菜单 - 零件在 Mac 上消失?

但现在菜单在移动设备上不起作用。当您点击单击时,会在主菜单文本下方出现一个框,就像您在链接下按下一样,这会导致链接无法激活 - 所以基本上菜单栏在手机上不起作用。

我已经检查了没有那行代码,它再次工作,但它不会在 Mac 上工作......所以需要在移动设备上禁用它或仅在其 Mac/Apple 操作系统时读取......

请帮忙谢谢

4

2 回答 2

1

您应该能够从导航器对象的平台属性中获取操作系统。

<script type="text/javascript">
    jQuery(document).ready(function(){
        // Mac OS detection
        if (/Mac[\/\s](\d+\.\d+)/.test(navigator.platform)) {
            /* for top navigation */
            jQuery("#menu ul, #menu li").css("-webkit-transform", "translateZ(0)");
            jQuery(" #menu li").hover( function() {
                    jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); }, 
                function() { 
                    jQuery(this).find('ul:first').css({visibility: "hidden"}); 
                });

            jQuery(" #menu2 li").hover( function() {
                    jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400); }, 
                function() {
                    jQuery(this).find('ul:first').css({visibility: "hidden"});
                });
            // Opera Fix
            if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)){ 
                jQuery(" #menu ul ").css({display: "none"}); 
                jQuery(" #menu2 ul ").css({display: "none"});
            }
        }
    });
</script>

或者您可以使用出色的 javascript session.js库;)
它会返回您浏览器操作系统的值,以及设备是平板电脑、手机还是移动设备。

编辑:添加可供使用的代码并删除 w3c 引用

于 2012-09-16T22:20:51.663 回答
1

你可以试试这个:

jQuery(document).ready(function(){

    // If Mac, or iPad, apply the following...
    if(navigator.userAgent.match(/(Mac|iPad)/i)) {

        jQuery("#menu ul, #menu li").css("-webkit-transform", "translateZ(0)");
        jQuery(" #menu ul ").css({display: "none"}); // Opera Fix        
        jQuery(" #menu li").hover(function(){
            jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
        },function(){
            jQuery(this).find('ul:first').css({visibility: "hidden"});
        });

        jQuery(" #menu2 ul ").css({display: "none"}); // Opera Fix
        jQuery(" #menu2 li").hover(function(){
            jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
        },function(){
            jQuery(this).find('ul:first').css({visibility: "hidden"});
        });

    } // End of Mac, iPad additional fixes ----

});

PS:如果您想包含 iPhone 和 iPod 的附加修复程序,您可以替换if(navigator.userAgent.match(/(Mac|iPad)/i))if(navigator.userAgent.match(/(Mac|iPhone|iPod|iPad)/i))

希望这会有所帮助,让我知道你的结果伙伴。

于 2012-09-17T01:29:24.593 回答