我正在为客户构建网站，并使用预构建主题作为起点。它带有一个 js 文件，该文件具有用于移动导航的点击功能，一切正常，但是当我为 jQuery 添加脚本标记时，移动导航中断并且控制台出现此错误: Uncaught TypeError: Cannot set property 'onclick' of null 我该如何解决这个问题？导致错误的js行是document.getElementById('mobile-navigation').onclick = function(){ 我尝试更改该行以使用 jQuery 来选择元素，但这只会在 js 文件中进一步导致另一个错误。我该如何解决这个问题？

在 html 中:

<div id="navigation">
    <span id="mobile-navigation">&nbsp;</span>
    <h1 class="nav-h1"><a href="index.html" class="logo"><!-- <img src="images/logo.png" alt=""> -->Header</a></h1>
    <ul id="menu">
        <li class="selected navList">
            <a ui-sref="home">Home</a>
        </li>
        <li class="navList">
            <a href="about.html">About</a>
        </li>
        <li class="navList">
            <a ui-sref="find">Find a Vendor</a>
            <!-- <ul>
                <li>
                    <a href="runningsinglepost.html">Running single post</a>
                </li>
            </ul> -->
        </li>
        <!-- <li>
            <a href="blog.html">Blog</a>
            <ul>
                <li>
                    <a href="blogsinglepost.html">blog single post</a>
                </li>
            </ul>
        </li> -->
        <li class="navList">
            <a href="contact.html">Contact</a>
        </li>
    </ul>
</div>

js:

window.onload = function(){
            var getNavi = document.getElementById('menu');
            document.getElementById('mobile-navigation').onclick = function(){
                var a = getNavi.getAttribute('style');
                if(a){
                    getNavi.removeAttribute('style');
                    document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-menu.png)';
                } else {
                    getNavi.style.display='block';
                    document.getElementById('mobile-navigation').style.backgroundImage='url(images/mobile/mobile-close.png)';
                }
            };
            var getElm = getNavi.getElementsByTagName("LI");
            for(var i=0;i<getElm.length;i++){
                if(getElm[i].children.length>1){
                    var smenu = document.createElement("span");
                    smenu.setAttribute("class","mobile-submenu");
                    smenu.setAttribute("OnClick","submenu("+i+")");
                    getElm[i].appendChild(smenu);
                };
            };
            submenu = function (i){
                var sub = getElm[i].children[1];
                var b = sub.getAttribute('style');
                if(b){
                    sub.removeAttribute('style');
                    getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-expand.png)';
                    getElm[i].lastChild.style.backgroundColor='rgba(255, 255, 255, 0.8)';
                } else {
                    sub.style.display='block';
                    getElm[i].lastChild.style.backgroundImage='url(images/mobile/mobile-collapse.png)';
                    getElm[i].lastChild.style.backgroundColor='rgba(248, 98, 130, 0.8)';
                }
            };
        };

jQuery 脚本标签:

<script type="text/javascript" src="/libs/bower_components/jquery/dist/jquery.min.js"></script>

mobile.js 脚本标签:

<script src="./js/mobile.js" type="text/javascript"></script>

注意我正在以 Angular 执行此操作并且导航栏已包含在索引中可能会有所帮助。

最佳答案

我怀疑您的 javascript 在文档加载之前正在运行。这意味着 javascript 找不到该对象，因为它还不存在。尝试使用 document.onload 而不是 window.onload。

关于javascript - jQuery 正在干扰 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38779315/