slicknav 不显示，但被识别答案

【问题标题】：slicknav not displaying, but is recognizedslicknav 不显示，但被识别
【发布时间】：2019-02-23 01:39:16
【问题描述】：

我一直在尝试将 slicknav 菜单合并到我的学校项目中，我对编码并不完全陌生，我相信我的错误很简单，但是经过 3 个小时的绞尽脑汁，我似乎无法找到解决方案我的问题，有关如何解决它或改进我的代码的一些帮助、见解或提示将不胜感激。（顺便说一句，我已经有一些功能可用的下拉菜单，但我想有一个用于移动屏幕的 slicknav

html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shape up!</title>
<link rel="shortcut icon" href="images/favicon.ico">
<!--^^^TITLE LOGO^^^-->
<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>
<script src="js/jquery.slicknav.min.js"></script>
<!--    <script href="js/jquery.slicknav.min.js"></script>-->
<script type="text/javascript">
<script>
   $(function(){
    $('#nav_menu').slicknav();
});
</script>
</head>
<header>
<img src="images/shape_up_logo.png" alt="Shape up logo">
<!--^^^SITE LOGO^^^--> 
<h1 id="logo"><a href="/index.html">Shape Up!</a></h1>
<h3>Find the best fit for you!</h3>
</header>

<body>
<main>
 <nav id="nav_menu">
     <ul>
         <li><a href="index.html" class="current">Home</a></li>
         <li><a href="strength/index.html">Strength Training</a>
             <ul>
                 <li></li>
             </ul>
         </li>
         <li><a href="cardio/index.html">Cardio Exercises</a></li>
         <li><a href="stress/index.html">Stress Relief</a>
            <ul>
                 <li><a href="stress/index.html">What is Stress?</a></li>
                 <li><a href="stress/tips.html">5 Helpful Tips</a></li>
                 <li><a href="stress/meditate.html">Meditation</a></li>
                 <li><a href="stress/vipassana.html">Vipassana</a></li>
             </ul>
         </li>
         <li><a href="diet/index.html">Healthy Diets</a>
             <ul>
                 <li><a href="diet/index.html">Why a Healthy Diet?</a></li>
                 <li><a href="diet/meals.html">Plan Your Meals</a></li>
                 <li><a href="diet/calories.html">Count Your Calories</a> 
                 </li>
                 <li><a href="diet/bmi.html">Calculate Your BMI</a></li>
             </ul>
         </li>
     </ul>
  </nav>

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

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;
}

}

出于排除故障的原因，我已将一些内容注释掉任何帮助将不胜感激，因为无论如何我可能错过了一件简单的事情

【问题讨论】：

标签： javascript jquery css html slicknav

【解决方案1】：

你的风格规则：

.js .slicknav_menu {
    display: block;
}

正在查找您的文档中不存在的类.js。 .js 类的典型用途是使用 javascript 将其动态添加到 <body> 标记中，这样您就可以为启用和未启用 javascript 的用户以不同的方式管理您的网站。

尝试从您的样式规则中删除.js，或使用$(document).ready(function(){$(body).addClass('js')}) 之类的内容动态添加.js

【讨论】：

尝试删除 .js 标记但没有成功，它还可以在哪里添加动态 .js 加法器？
会是这样吗？
@TheManBand91 是的，尽管在第一个

【解决方案2】：

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

   <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
   <script src="js/jquery.slicknav.min.js"></script>
        <script>
   $(function(){
   $(document).ready(function(){$(body).addClass('js')}) 
   $('#nav_menu').slicknav();
   });
   </script>

和css文件：

 .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;
 }

 }

【讨论】：

如果您指的是我，而不是男人，不客气:) -- 我确实认为也许您可以完全不使用.js 逻辑，尽管它可能是： a）在您的项目范围内或 b）如果它没有损坏，请不要修复它
这是一个相关的 SO，它提供了有关 .js 和 .no-js 类的更多信息：stackoverflow.com/questions/6724515/…