javascript - 响应式导航栏不起作用

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 element 并查看是否有类似“加载脚本失败”之类的错误。如果是这样，请尝试使用

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