我试图在使用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页面突然出现。 怎么了?