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元素，看看是否存在类似“未能编写脚本”的错误。＆＃39;如果是这样，请尝试使用

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

响应式导航栏无效

1 个答案: