クリック時に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をクリックすると、文書へのクリックイベントバブルとonDocClick関数が実行されました。 clickイベントのバブリングを停止するには、event.stopPropagation()のsubmenuリンクに新しい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); 
     }) 
    }); 
});