Question

我有一个顶部导航栏的java脚本代码。该代码仅在我位于网站的根目录（主页）时才有效。例如，如果单击右上角的加号图标，则会转到另一页，然后菜单停止工作。我现在不擅长JS而且我不明白为什么。我猜这可能是因为当url不同时，某些元素没有被加载，但我无法解决它。我将发布CSS和html代码以查看SCRIPTS的放置位置。关于脚本在html文件正文中的一个事实是，由于菜单再次停止工作，我无法将其移动到外部主体。我认为原因是一样的，但我无法解决它。

请给我一个编辑过的代码，因为在另一个问题中，人们给了我一些想法，而我尝试了所有这些，但都没有。这只是为了确保任何答案都是一个有效的答案而且不仅仅是一种预感。谢谢！

以下是您可以用于试验和错误的已部署网站的链接：

http://ejeddi.pythonanywhere.com/

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");
            $("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：

    {% 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 type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

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

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

        <body>
            <header class="navbar topnavbar">
                {% include 'bpmapp/_topnavbar.html' %}
            </header>

            <div id="main" role="main">
                <div class="container">
                    {% block content %}
                    {% endblock content %}
                </div>
            </div> {# /#main #}

            <script type='text/javascript' src="static/bpmapp/js/cbpHorizontalMenu.min.js"></script>

        </body>
    </html>

topnavbar html

{% load static %}
{% load staticfiles %}


        <head>
            <link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-default.css' %}">
            <link rel="stylesheet" type="text/css" href="{% static 'bpmapp/css/topnav-component.css' %}">

            <!-- used for icons in navbar -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        </head>

        <div class="container">
            <header class="clearfix">
                <!--<span>Tagline</span>-->
                <a href="/"><i class="fa fa-home fa-2x" id="icon-home"> </i></a>
                <nav>
                <a href="/process_new/"> <i class="fa fa-plus fa-2x" id="icon-new-process" data-info="New Process"></i> </a>
                    <!-- 
                    <a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Step">Previous Blueprint</a>
                    <a href="http://tympanus.net/codrops/?p=14426" class="icon-drop" data-info="Next Step">back to the Codrops article</a>
                     -->
                </nav>
            </header>   

            <div class="nav-main">
                <nav id="cbp-hrmenu" class="cbp-hrmenu">
                    <ul>
                        <li>
                            <a href="#">Products</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Downloads</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner">
                                    <div>
                                        <h4>Education &amp; Learning</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Applications</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                        </ul>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Projects</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>

                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>

                    </ul>
                </nav>
            </div>

        </div>

topnavbar默认CSS：

/* General Demo Style */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome.eot');
    src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
        url('../fonts/fontawesome.svg#fontawesome') format('svg'),
        url('../fonts/fontawesome.woff') format('woff'),
        url('../fonts/fontawesome.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}


body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}

a {
    color: #f0f0f0;
    text-decoration: none;
}

a:hover {
    color: yellow;
    transform: scale(1.2);
}

.container{
    padding-top:0px;
}


.container > header {
    width: 90%;
    max-width: 70em;
    margin: 0 auto; /* remove auto to push the h1 text to left*/
    padding: 0 0.5em 0.5em 0.5em;
}

/* Brand Name Text */
.container > header h1 {
    font-size: 1.5em;
    line-height: 1.3;
    margin: 0;
    float: left;
    font-weight: 400;
    margin-top:0;
}

.container > header span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding: 0 0 0.1em 0.1em;
}

.container > header nav {
    float: right;
    text-align:bottom;
    padding-top:0.1em;
}

/* next previous icons*/
/*
.container > header nav a {
    display: block;
    float: left;
    position: relative;
    width: 2.5em;
    height: 2.5em;
    background: #fff;
    border-radius: 50%;
    color: transparent;
    margin: 0 0.5em;
    border: 4px solid #47a3da;
    text-indent: -8000px;
}
*/

/* after click next previous icons*/
.container > header nav a:after {
    content: attr(data-info);
    color: #47a3da;
    position: absolute;
    width: 600%;
    top: 120%;
    text-align: right;
    right: 0;
    opacity: 0;
    pointer-events: none;
}

.container > header nav a:hover:after {
    opacity: 1;
}
/* hover next previous icons*/
/*
.container > header nav a:hover {
    background: #47a3da;
}
*/

.icon-drop:before, 
.icon-arrow-left:before {
    font-family: 'fontawesome';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 2;
    text-align: center;
    color: #47a3da;
    -webkit-font-smoothing: antialiased;
    text-indent: 8000px;
    padding-left: 8px;
}

.container > header nav a:hover:before {
    color: #fff;
}

.icon-drop:before {
    content: "\e000";
}

.icon-arrow-left:before {
    content: "\f060";
}

.fa{
    color:#999;
    transition: all .2s ease-in-out;
}

.fa:hover{
    color: #47a3da;
    /*color:rgb(20,220,180); ----- green ----- */
    transform: scale(1.2);
}

topnavbar组件CSS：

/* menu separator */
.cbp-hrmenu {
    width: 100%;
    margin-top: 0em;
    border-bottom: 4px solid #47a3da;
}

/* general ul (div of tabs) */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* first level ul style (div of tabs)*/
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0 auto; /*remove auto to push tabs to left*/
    padding: 0 1.875em;

}
/* tabs individually + the menu that drops*/
.cbp-hrmenu > ul > li {
    display: inline-block;
}

/* link (text) of tabs */
.cbp-hrmenu > ul > li > a {
    font-size:1.1em;
    font-weight: 700;
    padding: 0.1em 1em; /* height of tabs*/
    color: #999;
    display: inline-block;
    border-radius:0.5em 0.5em 0em 0em;
    transition: all .2s ease-in-out; 
}
/* hover tabs' text */
.cbp-hrmenu > ul > li > a:hover {
    /*color: #47a3da;
    transition: color 0.2s linear;*/
    color:#47a3da;
    transform: scale(1.2);
}

/* links inside the drop down menu */
.cbp-hrmenu > ul > li.cbp-hropen > a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: white;
    background: #47a3da;
}

/* sub-menu (the one that drops and contains options)*/
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #47a3da;
    width: 100%;
    left: 0;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
    transition: all .2s ease-in-out;
}

.cbp-hrmenu .cbp-hrsub-inner > div a:hover {
    font-weight:bold;
    color:yellow;
}


.cbp-hrsub h4 {
    color: #afdefa;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) { 

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #47a3da;
    }

    .cbp-hrmenu > ul > li > a { 
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub { 
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) { 
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}

Answer 1

这是我能看到的代码中的主要问题：

您使用的是静态文件，因此它们位于网址：http://yourdomain.com/static，但您尝试加载http://yourdomain.com/process_new/static/

你可以通过两种方式修复它：

第一种方法是更改脚本标记中的src属性并在开头添加“/”。它将从根目录获取js文件：

<script type='text/javascript' src="/static/bpmapp/js/cbpHorizontalMenu.min.js"></script>

另一种解决方法是使用Django静态模板标记。它将为您创建静态文件的URL：

<script type='text/javascript' src="{% static 'bpmapp/js/cbpHorizontalMenu.min.js' %}"></script>

不要忘记在模板文件的开头添加此标记：

{% load staticfiles %}

如果URL不是home / root，则Java Script代码不起作用

1 个答案: