1

我一直在尝试将 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;
}

}

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

4

2 回答 2

0

你的风格规则：

.js .slicknav_menu {
    display: block;
}

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

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

于 2018-09-19T00:48:16.870 回答
0

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

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

 }
于 2018-09-19T02:39:27.327 回答