Question

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

}

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

Answer 1

您的样式规则：

script:
  - scp -r dist  user@[IP]:/home/[user]/preprod-back
  - ssh -tt user@[IP] "cd /home/[user]/preprod-back && yarn run doc && docker-compose restart"

正在寻找文档中不存在的类.js .slicknav_menu { display: block; }。 .js类的典型用法是使用javascript将其动态添加到.js标记中，以便您可以针对启用和不启用javascript的用户分别管理网站。

尝试从样式规则中删除<body>，或动态添加.js，例如.js

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

 }

slicknav不显示，但可以识别

2 个答案: