響應導航欄不工作

這是在HTML和CSS我響應導航欄的代碼。我不知道爲什麼它不起作用，但我之前在我的個人投資組合網站中使用了相同的代碼。當我嘗試，在我的新網站相同，它不工作。請幫助我，我做錯了。響應導航欄不工作

謝謝！

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

 
     }); 
 
});

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

<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"> 
 
     \t <i class="fa fa-bars fa-2x"></i> 
 
     </div> 
 
     
 
     \t <ul id="navlist"> 
 
     \t \t <li class="active"><a href="index.html">Home</a></li> 
 
     \t \t <li><a href="gallery.html">Gallery</a></li> 
 
     \t \t <li><a href="eminities.html">Eminities</a></li> 
 
     \t \t <li><a href="#reservations.html">Reservations</a></li> 
 
     \t \t <li><a href="contactus.html">Contact Us</a></li> 
 
     \t </ul> 
 
     \t 
 
    
 
    </nav>

來源

2017-05-16 Saran

也許某些外部資源未正確加載？似乎在這個小提琴上爲我工作得很好：[JSFiddle]（https://jsfiddle.net/gtwzd4kd/） – trevorp

是的，對我來說也很好。通過檢查一個元素來檢查你的控制檯，看看你是否有任何錯誤。 –

同樣在這裏。我能夠讓菜單正常工作。我確實看到你在中有兩個引用font-awesome css的地方。我不相信這有什麼關係，但它可能不會受到傷害。 – trav

我想有一個與jQuery腳本，你加載

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

在HTML中的問題，腳本放置在同一目錄作爲您的網頁，因此使用上述語句沒有問題。可能是你沒有在你創建的新網站中的文件。

嘗試使用inspect元素，看看是否有錯誤，說'失敗laod腳本'。如果是這樣，請嘗試使用

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

來源

2017-05-16 18:27:13

我使用的腳本標記仍然不起作用。 – Saran

響應導航欄不工作

回答

相關問題