关于javascript：slicknav没有显示，但被识别

slicknav not displaying, but is recognized

我一直试图在我的学校项目中加入一个slicknav菜单，我不是一个全新的编码，我相信我的错误很简单，但经过3个小时的绞尽脑汁，我似乎无法找到问题的解决方案，关于如何修复它或者改进我的代码的一些帮助，见解或提示将不胜感激。 (顺便说一下，我已经有了一些功能正常的下拉菜单，但是我希望有一个用于移动屏幕的slicknav

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Shape up!
<link rel="shortcut icon" href="images/favicon.ico">

<link href="styles/normalize.css" rel="stylesheet" type="text/css">
<link href="styles/main_rwd.css" rel="stylesheet" type="text/css">
<link href="styles/slicknav.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
<script src="js/jquery.slicknav.min.js">

<script type="text/javascript">

$(function(){
$('#nav_menu').slicknav();
});

</head>
<header>
<img src="images/shape_up_logo.png" alt="Shape up logo">

<h1 id="logo">Shape Up!
Find the best fit for you!
</header>

<body>
<main>
<nav id="nav_menu">

<ul>

<li>
Home
</li>

<li>
Strength Training

<ul>

<li>

</li>

</ul>

</li>

<li>
Cardio Exercises
</li>

<li>
Stress Relief

<ul>

<li>
What is Stress?
</li>

<li>
5 Helpful Tips
</li>

<li>
Meditation
</li>

<li>
Vipassana
</li>

</ul>

</li>

<li>
Healthy Diets

<ul>

<li>
Why a Healthy Diet?
</li>

<li>
Plan Your Meals
</li>

<li>
Count Your Calories

</li>

<li>
Calculate Your BMI
</li>

</ul>

</li>

</ul>

</nav>

下一部分是关于slicknav的css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

slicknav_menu {
display:none;
}

@media only screen and (max-width: 900px) {
body {
box-shadow: none;
font-size: 90%;
}
}
/*
TABLET SIZE^^^
.slicknav_menu {
display:none;
}
*/

@media only screen and (max-width: 767px) {

#nav_menu {
display: none;
}
.js .slicknav_menu {
display: block;
}

}

出于解决问题的原因，我已经评论了一些东西
任何帮助将不胜感激，因为我可能错过了一个简单的事情

我终于完成了！
但是我很遗憾地说我不知道我是怎么做到的。我在这里和那里删除了一些东西，我不太记得我完全删除了什么。虽然我将为遇到类似问题的任何人提供代码，但我知道必须努力将其提供给我需要的地方。
主要脚本部分：

1
2
3
4
5
6
7

和css文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.slicknav_menu {
display:none;
}

@media only screen and (max-width: 900px) {
body {
box-shadow: none;
font-size: 90%;
}
}

@media only screen and (max-width: 767px) {

#nav_menu {
display: none;
}
.slicknav_menu {
display: block;
position: inherit;
}

}