带有 JavaScript 静态的 Django 汉堡菜单答案

【问题标题】：Django Burger Menu with JavaScript Static带有 JavaScript 静态的 Django 汉堡菜单
【发布时间】：2021-04-27 20:25:10
【问题描述】：

我正在编写一个 Django 网站。单击汉堡图标时，我正在尝试使用 JavaScript 文件将移动导航栏移动到页面中。

我已经成功地从静态文件夹中加载了一个 JavaScript 文件。（我检查了警报功能。）

但是，一旦我在 JavaScript 文件中编写了更多代码，JavaScript 文件就无法工作，并且在刷新网站页面时我没有收到“您好，javascript 文件已加载”的警报。我的javascript不正确吗？格式不适合在 Django 中使用吗？

任何帮助将不胜感激，感谢阅读。

App.js

alert("Hello, javascript file loaded");  


const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');

    burger.addEventListener('click', () = > {
        nav.classList.toggle('nav-active');
    }); 
}

navSlide();

Base.html

{% load static %}
<html>
    <head>
        <title>Pep Genie</title>
        <link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
    </head>

    <body>

        {% block content %}{% endblock %}

        <script src="{% static 'genie/app.js' type="text/javascript" %}"></script>
    </body>
</html>

Index.html

{% extends 'genie/base.html' %}
{% block content %}

<nav>
    <div class="logo">
        <h4>The Logo</h4>
    </div>
    <ul class="nav-links">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Work</a>
        </li>
        <li>
            <a href="#">Our Projects</a>
        </li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>

</nav>

Style.css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 }

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: navy;
    color: lightgray;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

nav .logo {
    margin: 0 100px 0 0;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 40%;  
}

nav li {
    list-style: none;
}

nav a {
    text-decoration: none;
    color: lightgray;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {

    width: 25px;
    height: 2px;
    margin: 4px;
    background-color: lightgray;
}

@media screen and (max-width: 1000px) {
    .nav-links {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0;
        top: 8vh;
        height: 92vh;
        background-color: navy;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
    transform: translateX(0%);
}

【问题讨论】：

标签： javascript css django django-templates

【解决方案1】：

function navSlide(){
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');

    burger.addEventListener('click', function(){
        nav.classList.toggle('nav-active');
        console.log('event triggered');
    }); 
}

navSlide();

    * {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 }

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: navy;
    color: lightgray;
    font-family: Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}
.burger {
        display: none;
    }
nav .logo {
    margin: 0 100px 0 0;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 40%;  
}

nav li {
    list-style: none;
}

nav a {
    text-decoration: none;
    color: lightgray;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}


.burger div {

    width: 25px;
    height: 2px;
    margin: 4px;
    background-color: lightgray;
}

@media screen and (max-width: 1000px) {
    .nav-links {
        width: 50%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0;
        top: 8vh;
        height: 92vh;
        background-color: navy;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .burger {
        display: block;
        cursor: pointer;
        background: red;
    }
}

.nav-active {
    transform: translateX(0%);
}

<html>
    <head>
        <title>Pep Genie</title>

    </head>

    <body>

        <nav>
    <div class="logo">
        <h4>The Logo</h4>
    </div>
    <ul class="nav-links">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Work</a>
        </li>
        <li>
            <a href="#">Our Projects</a>
        </li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>

</nav>
    </body>
</html>

我不了解 django，你的 js 风格很奇怪，但 tha 的经典工作方式如下所示：

function navSlide(){
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');

burger.addEventListener('click', function(){
    nav.classList.toggle('nav-active');
});

}

请查看此示例，在控制台中您可以看到 click burger-menu 触发的事件：https://jsfiddle.net/yf9wo67a/

【讨论】：

感谢您的回答！你的代码运气好得多。我将它粘贴到我的项目中，没有任何变化。刷新时未出现警报“您好，已加载 javascript 文件”。还是谢谢你
你可以使用像 jshint.com 这样的 linter 工具来检查你的代码是否有效
嗨，ÿmit，谢谢你的例子。它看到它确实有效。由于代码在我的 vs 代码中不起作用，我认为问题一定是 Django 特定的。再次感谢。

【解决方案2】：

这行好像有问题：

<script src="{% static 'genie/app.js' type="text/javascript" %}"></script>

type="" 部分应与 src 分开，如下所示：

<script src="{% static 'genie/app.js' %}" type="text/javascript"></script>

【讨论】：

您好 Ffion，非常感谢您的回复。我已经纠正了错误，但遗憾的是没有任何变化。
不客气。嗯，JavaScript 代码本身看起来不错。您在控制台中看到任何错误吗？这将是检查是否确实找到并加载了 js 文件的有用方法。如果您使用的是 Google Chrome，您可以右键单击屏幕，单击“检查”，然后单击“控制台”选项卡即可查看。

【解决方案3】：

Django 中的纯 CSS 汉堡菜单

通过使用带有 :target 伪类的纯 CSS 响应式导航栏找到了解决方法。

这是我的资料来源：

Mark Caron：纯 CSS 汉堡菜单。 https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793
Mozilla MDN Web 文档：CSS :target peudo-class。 https://developer.mozilla.org/en-US/docs/Web/CSS/:target

您可以在锚标记内设置汉堡图标，而不是使用带有 onclick 的 JavaScript 函数，并将 href 设置为和 url 分数，如“#mobile-menu”。然后，要使 url 部分引起更改（例如将菜单显示从无更改为阻止），您可以使用 CSS :target 伪类。将此添加到您的 CSS 中。

.mobile-menu:target{
    display: flex;
}

这引用了一个 id，因此您的菜单必须将 id 设置为“mobile-menu”。现在，这可以使菜单在单击汉堡时出现。

这是我的完整代码供参考：

index.html

{% extends 'genie/base.html' %}
{% block content %}


<nav>
    <div class="logo">
        <h4>The Logo</h4>
    </div>
    <ul class="nav-links" id="nav-links">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Work</a>
        </li>
        <li>
            <a href="#">Our Projects</a>
        </li>
    </ul>
    <a class="burger" href="#nav-links">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </a>

</nav>


{% endblock %}

base.html

{% load static %}
<html>
    <head>
        <title>Pep Genie</title>
        <link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
        <link rel="javascript" type="text/javascript" href="{% static 'genie/app.js' %}">
    </head>

    <body>
        
        {% block content %}{% endblock %}

        <script src="{% static 'genie/app.js' %}" type="text/javascript"></script>
    </body>
</html>

style.css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
 }



 nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: navy;
  color: lightgray;
  font-family: Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

nav .logo {
  margin: 0 100px 0 0;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;  
}

nav li {
  list-style: none;
}

nav a {
  text-decoration: none;
  color: lightgray;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 14px;
}

.burger {
  display: none;
}

.burger div {

  width: 25px;
  height: 2px;
  margin: 4px;
  background-color: lightgray;
}

@media screen and (max-width: 1000px) {
  .nav-links {
      width: 50%;
  }
}

@media screen and (max-width: 768px) {
  body {
      overflow-x: hidden;
  }
  .nav-links {
      position: absolute;
      right: 0;
      top: 8vh;
      height: 92vh;
      background-color: navy;
      display: none;
      flex-direction: column;
      align-items: center;
      width: 50%;

  }

  .burger {
      display: block;
      cursor: pointer;
  }
}

.nav-links:target{
    display: flex;
}

【讨论】：