响应式导航栏不起作用

Question

这是我的HTML和CSS响应式导航条形码。 我不知道为什么它不起作用，但是我之前在我的个人投资组合网站中使用了相同的代码。 当我尝试过时，在我的新网站中同样无法正常工作。 请帮我做错地方。

谢谢！

 $(document).ready(function(){ $(".menu-icon").on("click",function(){ $("nav ul").toggleClass("showing"); }); }); 

  /*--------------nav rules----------*/ body{ margin: 0; padding: 0; font-family: 'Titillium Web', sans-serif; } ul { background-color: red; opacity: 0.7; font-weight: bolder; overflow: hidden; color: white; padding: 0; text-align: center; margin: 0; } li { display: inline-block; padding: 20px; } li a{ text-decoration: none; color: inherit; } li a:hover { background-color: #111; } .menu-icon{ width: 100%; background-color: black; opacity: 0.7; text-align: right; box-sizing: border-box; padding: 15px 10px; cursor: pointer; color: #fff; display: none; } @media (max-width: 580px){ nav ul{ max-height: 0px; } nav ul li{ box-sizing: border-box; width: 100%; padding: 15px; text-align: left; } .menu-icon{ display: block; } .showing{ max-height: 20em; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,700" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav> <div class="menu-icon"> <i class="fa fa-bars fa-2x"></i> </div> <ul id="navlist"> <li class="active"><a href="index.html">Home</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="eminities.html">Eminities</a></li> <li><a href="#reservations.html">Reservations</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </nav> 

Answer 1

我认为您正在加载的jquery脚本存在问题

<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

在HTML中，脚本与您的网页放置在同一目录中，因此使用上面的语句没有问题。 可能是您在创建的新网站中没有该文件。

尝试使用inspect元素，查看是否存在诸如“无法完成脚本编写”之类的错误。 如果是这样，请尝试使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/>