js-scroll-trigger在Django-cms show_menu中不起作用

时间:2018-08-03 17:05:22

标签: javascript html django django-cms

我试图在使用js-scroll-trigger类的Django-cms中创建菜单,所以我为 base.html 编写了此代码:

{% load cms_tags menu_tags sekizai_tags staticfiles %}
<!DOCTYPE html>
<html lang="{{LANGUAGE_CODE}}">

<head>
      <title>{% page_attribute 'page_title' %} - Creative</title>
      <link href="{% static "vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
      <link href="{% static "css/creative.min.css" %}" rel="stylesheet">
      {% render_block "css" %}
 </head>

<body id="page-top">
{% cms_toolbar %}
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
   <div class="container">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">brand</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">

      <ul class="navbar-nav ml-auto  ">
          {% show_menu 0 100 100 100 "menu/menu.html" %}
      </ul>
    </div>
  </div>
 </nav>

 {% block content %} {% endblock %}


 <script src="{% static "vendor/jquery/jquery.min.js" %}"></script>
 <script src="{% static "vendor/bootstrap/js/bootstrap.bundle.min.js" %}"></script>

 <!-- Plugin JavaScript -->
<script src="{% static "vendor/jquery-easing/jquery.easing.min.js" %}"></script>
<script src="{% static "vendor/scrollreveal/scrollreveal.min.js"%}"></script>
<script src="{% static "vendor/magnific-popup/jquery.magnific-popup.min.js"%}"></script>

<!-- Custom scripts for this template -->
<script src="{% static "js/creative.min.js" %}"></script>
 {% render_block "js" %}
</body>

</html>

menu/menu.html中,我有:

{% load cms_tags menu_tags   %}


 <ul class="navbar-nav ml-auto">
 {% for child in children %}
 <!-- no child pages  -->
    {% if child.is_leaf_node %}
        <li class="nav-item nav-link "><a class="nav-link js-scroll-trigger" href="{{ child.get_absolute_url }}"> 
{{child.get_menu_title }}</a></li>
    {% endif %}
<!-- /no child pages  -->
 <!-- has child pages  -->
    {% if not child.is_leaf_node or child.ancestor %}
        <li class="nav-item nav-link  dropdown">
            <a  href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
            {{child.get_menu_title }}<b class="caret"></b></a>
            <ul class="dropdown-menu">
                {% if child.get_descendants %}
                    {% for kid in child.get_descendants %}
                        <li class="nav-link nav-item">
                            <a class="nav-link " href="{{ kid.get_absolute_url }}">
                                {{kid.get_menu_title }}
                            </a>
                        </li>
                    {% endfor %}
                {% endif %}
            </ul>
        </li>
    {% endif %}
   <!-- /has child pages  -->
   {% endfor %} 
   <!-- /end for child -->
  </ul>

所以我在Django-cms的管理中创建了一个About页面,并将其重定向到full-width.html中现有的#about页面。当在导航栏中的按品牌按钮重定向到#page-top时,js-scroll-trigger可以正常工作,但是当我按About按钮时,它不起作用,并且About页面突然出现。 怎么了?

0 个答案:

没有答案