Question

我有一个基本模板可以正常使用我在这里发布的格式。但是，我想将脚本保留在一个块中，但是当我将其中一个脚本从主体移动到头部时，单击时菜单不会丢失。我该如何解决这个问题？

HTML：

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en" class="no-js">
    <head>
        {% block meta_tags %}{% endblock meta_tags%}


    <title>
        {% block title %}BPM App{% endblock title %} 
    </title>

    {% block stylesheets %}
        <link type="text/javascript" href="{% static 'bpmapp/js/topnavbar.js' %}">
        <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>
    {% endblock %}

    {% block javascript %}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

        <script>
            $(function() {
                cbpHorizontalMenu.init();
            });
        </script>
    {% endblock javascript %}

    {% block extra_head %}{% endblock %}
    </head>

    <body>
        {% include 'bpmapp/_topnavbar.html' %}

        {% block content %}
        {% endblock content %}

        <script src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>

    </body>
</html>

cbpHorizontalMenu.min.js：

var cbpHorizontalMenu = (function() {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    function f() {
        g.on("click", a);
        b.on("click", function(h) {
            h.stopPropagation()
        })
    }

    function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("click", e)
        }
        return false
    }

    function e(h) {
        b.eq(d).removeClass("cbp-hropen");
        d = -1
    }
    return {
        init: f
    }
})();

已修改为：

var cbpHorizontalMenu =$( document ).ready(function() {
    var b = $("#cbp-hrmenu > ul > li"),
        g = b.children("a"),
        c = $("body"),
        d = -1;

    $(function f() {
        g.on("click", a);
        b.on("click", function(h) {
            h.stopPropagation()
        })
    });

    $(function a(j) {
        if (d !== -1) {
            b.eq(d).removeClass("cbp-hropen")
        }
        var i = $(j.currentTarget).parent("li"),
            h = i.index();
        if (d === h) {
            i.removeClass("cbp-hropen");
            d = -1
        } else {
            i.addClass("cbp-hropen");
            d = h;
            c.off("click").on("click", e)
        }
        return false
    });

    $(function e(h) {
        b.eq(d).removeClass("cbp-hropen");
        d = -1
    }
    return {
        init: f
    });
})();

Answer 1

您尝试在DOM上添加的元素可能无法完成加载，因此在javascript运行时不存在。通过将它保持在主体的底部，当javascript运行时元素存在。你可以使用像

这样的东西

$( document ).ready(function() {
  var cbpHorizontalMenu = {};
});

此处有更多信息https://api.jquery.com/ready/

Answer 2

如果您要将您的脚本包含在页面的头部（因此在body标记之前），则无需将 jQuery 作为项目的一部分包含在内（对于跨浏览器）可靠的目的）。我建议您下载它以便能够从磁盘本地加载它，否则，这里是它的在线链接，您可以将它添加到您的头部（就在您自己的脚本标记之前）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

现在需要使用 jQuery 来确保在脚本执行之前已经完全加载了DOM，这是通过将整个脚本代码包装在 ready 函数中来实现的：

$(document).ready(function () {
    var cbpHorizontalMenu = (function() {
        var b = $("#cbp-hrmenu > ul > li"),
            g = b.children("a"),
            c = $("body"),
            d = -1;

        function f() {
            g.on("click", a);
            b.on("click", function(h) {
                h.stopPropagation()
            })
        }

        function a(j) {
            if (d !== -1) {
                b.eq(d).removeClass("cbp-hropen")
            }
            var i = $(j.currentTarget).parent("li"),
                h = i.index();
            if (d === h) {
                i.removeClass("cbp-hropen");
                d = -1
            } else {
                i.addClass("cbp-hropen");
                d = h;
                c.off("click").on("click", e)
            }
            return false
        }

        function e(h) {
            b.eq(d).removeClass("cbp-hropen");
            d = -1
        }
        return {
            init: f
        }
    })();
});

脚本无法在html body标记之外工作

2 个答案: