我正在关注 this创建响应式导航栏的指南，根据屏幕的尺寸，将在下拉列表中显示其元素(而不是内联，用于更大的屏幕)。
在 HTML 的相关部分下方(将一些无用的部分替换为“...”以提高和加快可读性)
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="javascript" href="{% static 'javascript/responsive.js' %}">
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->
<!-- Main Logo -->
<div class="main-image" id="myMainImage">
<img src="{{STATIC_URL}}/static/images/logo.png"/>
</div>
<!-- Navigation Bar -->
<div class="topnav" id="myTopnav">
<a href <a href="#home" class="active">Home</a>
<a href="http://www...</a></li>
<a href="http://www.../">Storia di Gabriella</a></li>
<a href="http://www...">Video Gallery</a></li>
<a href="http://www...">Photo Gallery</a></li>
<a href="http://www.../">Dicono di Noi</a></li>
<a href="http://www...">Come Contattarci</a></li>
<input type="text" placeholder="Ricerca..">
<a href="javascript:void(0);" class="icon" onclick="respScreen()">☰</a>
</div>
在 static 文件夹 (mysite/articles/static) 中，我创建了一个 javascript 文件夹，里面有一个 responsive.js 文件
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function respScreen() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
最后，我填写了相关部分下方的 styles.css(在 mysite/articles/static/css 中)
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
我不明白为什么尽管完全按照链接的指南进行操作，但当我放大页面时，导航栏不会自行压缩(相反，它的元素往往会相互重叠)。
EDIT1:我试图从教程中复制代码 here在 Pycharm 中并在我的本地 Django 服务器中运行它，但它不起作用。好像是配置问题。
在 settings.py 的静态路径下方
STATIC_URL = '/static/'
如果我能为您提供更多信息，请询问。
EDIT2:控制台日志如下(在 Firefox 中为 CTRL + SHIFT + J):
unreachable code after return statement aU73Q4U9JMQ.js:1028:375
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. hscv
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. hscv
Attempt to set a forbidden header was denied: Connection 1588510866-lcs_client_bin.js:99:385
Attempt to set a forbidden header was denied: Connection 1588510866-lcs_client_bin.js:99:385
EDIT3:如果您想查看完整元素以查看其他 Django 文件，它存储在 this 中Github 存储库。
最佳答案
解决了在 html 中使用 javascript 函数插入脚本标签的问题，如下所示
<script>
function respScreen() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
关于javascript - 使用 Python (Django)、HTML、CSS、Javascript 的响应式导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49294809/