单击时Django下拉列表超链接不起作用

Question

我正在构建一个django应用程序，除了下拉菜单中的链接外，所有内容都在起作用。我遵循了所有必要的内容，但是以某种方式链接并没有使Django呈现页面。在More下，链接About应起作用，但行不通。我包括代码，还暂时部署了它进行生产检查：

http://azeribocorp.pythonanywhere.com/index

html：

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

{% block stylesheets %} 
    <link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
{% endblock %}

<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
    <ul class="nav-items">
        <li class="{% if request.resolver_match.url_name == 'index' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'index' %} class='nav-link'><span>Home</span></a>
        </li>
        <!--<li class="nav-item">
            <a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
        </li>-->
        <li class="{% if request.resolver_match.url_name == 'track_containers' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'track_containers' %} class='nav-link'><span>Track Containers</span></a>
        </li>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
                </ul>
            </nav>
        </li> 
        <li class="{% if request.resolver_match.url_name == 'search' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'search' %} class='nav-link'><span>Search</span></a>
        </li>
        <li class="{% if request.resolver_match.url_name == 'report' %}
                nav-item active
            {% else %}
                nav-item
            {% endif %}"> 
            <a href={% url 'report' %} class='nav-link'><span>Report</span></a>
        </li>
        <li class="nav-item dropdown">
            <a href="#" class="nav-link"><span>More</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href={% url 'about' %} class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li> 
        <!--
        <li class="{% if request.resolver_match.url_name == 'more' %}
                nav-item dropdown active
            {% else %}
                nav-item dropdown
            {% endif %}"> 
            <a href='#'><span>More</span></a>
            <nav class="submenu">
                <ul class="submenu-items">
                    <li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
                    <li class="submenu-item"><hr class="submenu-seperator" /></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
                    <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
                </ul>
            </nav>
        </li> -->
    </ul>
</nav>
{% block js %}
    <script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock js %}

CSS：

body {
  margin: auto;
}
.topnavbar {
  background-color: rgba(20, 180, 255, 1);
  /*rgba(0,255,150,0.6); #3EDC99*/
  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
.nav {
  padding: 5px 5px 5px 5px;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background-color: rgba(245, 245, 245, 1)/*#3498db; */
}
.nav {
  width: 550px;
  margin: 0 auto 0 auto;
  text-align: center;
}

/* Navigation */
.nav {
  font-family: Verdana, Georgia, Arial, sans-serif;
  font-size: 14px;
}
.nav-items {
  padding: 0;
  list-style: none;
}

/* color of menu links
    span    {
        color:yellow;
    }
    */
.nav-item {
  display: inline-block;
  margin-right: 25px;
}
.nav-item:last-child {
  margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
  display: block;
  position: relative;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  outline: none;
  color: #ffffff;
}
.nav-link::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  -webkit-transform: translate(0, 10px);
  transform: translate(0, 10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before {
  opacity: 1;
  -webkit-transform: translate(0, 5px);
  transform: translate(0, 5px);
}
.dropdown {
  position: relative;
}
.dropdown .nav-link {
  padding-right: 15px;
  height: 17px;
  line-height: 17px;
}
.dropdown .nav-link::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  border: 5px solid transparent;
  border-top-color: #ffffff;
  /*small triangle showing drop down menu*/
}
.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 100;
  width: 200px;
  margin-left: -100px;
  background: #ffffff;
  border-radius: 3px;
  line-height: 1.46667;
  margin-top: -5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
  opacity: 0;
  -webkit-transform: translate(0, 0) scale(.85);
  transform: translate(0, 0)scale(.85);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  pointer-events: none;
}
.submenu::after,
.submenu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  height: 0;
}
.submenu::after {
  border-bottom-color: #ffffff;
}
.submenu::before {
  margin-left: -13px;
  border: 13px solid transparent;
  border-bottom-color: rgba(0, 0, 0, .1);
  -webkit-filter: blur(1px);
  filter: blur(1px);
}
.submenu-items {
  list-style: none;
  padding: 10px 0;
}
.submenu-item {
  display: block;
  text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
  color: #3498db;
  padding: 10px 20px;
}
.submenu-link:hover {
  text-decoration: underline;
}
.submenu-seperator {
  height: 0;
  margin: 12px 10px;
  border-top: 1px solid #eee;
}
.show-submenu .submenu {
  opacity: 1;
  -webkit-transform: translate(0, 25px) scale(1);
  transform: translate(0, 25px) scale(1);
  pointer-events: auto;
}
.submenu-link {
  color: red;
}
.nav-link.is-active::before {
  opacity: 1;
  -webkit-transform: translate(0, 5px);
  transform: translate(0, 5px);
}
.active{
    color:red;
    text-decoration:underline;
}

JS：

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
    el.addEventListener('click', onClick, false);
});
function onClick(e){
    e.preventDefault();
    var el = this.parentNode;
    el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
    el.classList.add('show-submenu');
    document.addEventListener('click', function onDocClick(e){
        e.preventDefault();
        if(el.contains(e.target)){
            return;
        }
        document.removeEventListener('click', onDocClick);
        hideSubMenu(el);
    });
}
function hideSubMenu(el){
    el.classList.remove('show-submenu');
}

views.py：

def index(request):
    return render(request, 'aztracker/__base.html')
def home(request):
    return render(request, 'aztracker/__base.html')
def report(request):
    return render(request, 'aztracker/__base.html')
def about(request):
    return render(request, 'aztracker/search_form.html')

urls.py：

from django.conf.urls import include, url
from .views import *
urlpatterns = [    
    url(r'^index', index, name='index'),
    url(r'^home', home, name='home'),
    url(r'^search', search, name='search'),
    url(r'^report', report, name='report'),
    url(r'^about', about, name='about'),
    url(r'^countries', list_all_countries, name='countries'),
    url(r'^track_containers', import_data, name='track_containers'),
]

Answer 1

在js文件中，有文档click事件。因此，当您单击submenu时，单击事件气泡以Document和onDocClick函数执行。为了停止click事件冒泡，您必须在submenu上使用event.stopPropagation()添加新的click事件。

通过此更改您的JS代码，

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
    el.addEventListener('click', onClick, false);
    /** New event for submenu links **/
    el.parentNode.querySelectorAll('.submenu-link').forEach(function(sel){
        sel.addEventListener('click', function(event){
            event.stopPropagation();
            hideSubMenu(el.parentNode);
        })
    });
});