jQuery:脚本突然停止工作

jQuery: Script suddenly stops working

本文关键字：停止工作 突然 脚本 jQuery      更新时间：2023-09-26

因此，我仔细研究了有关jQuery的问题，脚本停止工作。但它们似乎不适合我的问题：

当我在Android智能手机上切换视图时，scroll.js停止工作。链接甚至不会"跳转"到目的地。。。

这是index.html:

    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="./js/lightbox.min.js"></script>
<script type="text/javascript" src="./js/scroll.js"></script>
        <link rel="stylesheet" href="./css/lightbox.css"/>
        <link rel="stylesheet" href="./css/computer.css" media="screen and (min-width:981px)"></link>
        <!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
        <!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
        <link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-width:720px)">
        <!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->
        <script type="text/javascript">
            var next_move = "expand";
            $(document).ready(function (){
            if (window.matchMedia('(max-width: 720px)').matches) {
                    $("#icon-menu").on('click',function(){
                        if (next_move == "expand"){
                            $("#navigation").animate({left: '50%'});
                            $("body").animate({left: '50%'});
                            next_move = "shrink";
                    } else {
                        $("#navigation").animate({left: '0%'});
                        $("body").animate({left: '0%'});
                        next_move = "expand";
                    }
                    });
            }
            else{
            }
            });
        </script>
    </head>

和scroll.js:

 $(function() {
            $('a[href*=#]:not([href=#])').on('click',function() {
                if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });

Chrome（我想所有的webkit浏览器）和安卓浏览器都在发生什么。当我用Firefox打开它时，滚动就可以了，菜单展开就不行了。我尝试了.noConflict（），但它确实做到了，链接跳转到了目的地，菜单不再扩展。

查看：点击我

请忽略设备宽度之类的内容。它还没有完成，但我必须测试一下

所以真正的问题是：我做错了什么？如果存在冲突，我在哪里可以找到并纠正它们？

要重现这个问题，只需将浏览器调整为智能手机大小，然后刷新或使用智能手机即可。否则，该网站将显示为pc，在那里一切都很好。

编辑：在智能手机视图中的pc上，一切都可以使用Firefox，但在实际的智能手机上，菜单不会展开。。。

谢谢！

这个问题没有得到完全回答。

一个解决方案是，忽略移动设备的平滑滚动。所以，代码atm看起来是这样的：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./js/lightbox.min.js"></script>
    <link rel="stylesheet" href="./css/lightbox.css"/>
    <link rel="stylesheet" href="./css/computer.css" media="screen and (min-device-width:981px)"></link>
    <!-- <link rel="stylesheet" href="./css/tablet-portrait.css" media="screen and (max-width:980px)"> -->
    <!-- <link rel="stylesheet" href="./css/tablet-landscape.css" media="screen and (max-width:)"> -->
    <link rel="stylesheet" href="./css/phone-portrait.css" media="screen and (max-device-width:720px)">
    <!-- <link rel="stylesheet" href="./css/phone-landscape.css" media="screen and (max-width:)"> -->
    <script type="text/javascript">
        var next_move = "expand";
        $(document).ready(function (){
        if (window.matchMedia('(max-device-width: 720px)').matches) {
                $("#icon-menu").on('click',function(){
                    if (next_move == "expand"){
                        $("#navigation").animate({left: '50%'});
                        $("body").animate({left: '50%'});
                        next_move = "shrink";
                } else {
                    $("#navigation").animate({left: '0%'});
                    $("body").animate({left: '0%'});
                    next_move = "expand";
                }
                });
        }
        else{
            $(function() {
            $('a[href*=#]:not([href=#])').on('click',function() {
                if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                    if (target.length) {
                        $('html,body').animate({
                        scrollTop: target.offset().top
                        }, 1000);
                        return false;
                    }
                }
            });
        });
        }
        });
    </script>

因此，链接和菜单问题已经消失，但手机所需的平滑滚动效果仍然不起作用。

也许有人有线索。

要查看移动视图，需要一个宽度（而不是分辨率！）为720px的设备。

相关文章：