Question

我在网络开发方面相对较新，所以不确定我是否用正确的术语解释自己，但是在我的一个小项目中遇到了这个小问题：

我有一个导航菜单，其中包含通过开关添加的功能（主要是样式相关）。浏览网站的移动版本时，菜单中的元素会有所不同，因此我希望切换工具箱中列出的某些命令不会被执行。这是我所拥有的代码中的简化示例：

//main (desktop) site functionality
$(".nav").click(function(event) {

    var what = event.target.className;

    switch (what){
        case "item 1":
            if ($(".text1").css("display") == "none"){
                $(".text1").css("display", "block");

                //this below is the line I don't want it to execute when on mobile
                $(".item5").css("margin-top","196px");
            } else {
                $("text1").css("display", "none");
                $(".item5").css("margin-top","0");
            }
            break;
    });

    //This is the function I use to know you are browsing on a mobile,
    //where the main change inside the CSS media query is not displaying the "scroller"
    function checkif(){
        if ($(".scroller").css("display") == "none" ){
        $(".item5").insertAfter($(".item12"));
        if($(".text1").css("display") == "block"){
            $(".item5").css("margin-top","0");
        }
    }
});

这是简化的，案例中的变化不仅仅是一个边际，我改变了颜色，文字，多个元素的显示。因为我不希望它只是不执行开关，只是为了读取checkif（）函数的属性并在重叠时执行那些而不是交换机中的那些（如在边距中）。谢谢！

Answer 1

似乎解决方案的关键是找出用户是否使用移动设备。

让我建议您另一种检测移动设备的方法，而不是checkif()功能。

＆＃13;

function isMobile(){
    // Get device user agent string
    var userAgent = navigator.userAgent;

    // Regular expression to sniff user agent
    var regexp = /mobi/i;

    // Test if the regexp exists in the user agent string
    return regexp.test(userAgent);
}

console.log(isMobile());

＆＃13;

关于此here的更多说明。

无论如何，除非你有充分的理由，否则你应该在CSS而不是JavaScript中做你需要做的事情。

jQuery - 如何不执行单行命令

1 个答案: