移動菜單在Jfiddle中工作，但不在本地主機上

Question

我使用toggleClass功能創建響應式移動菜單以打開菜單。我讓它在Jfiddle甚至是波紋管中工作，但是每當我點擊括號中實時預覽中的導航圖標時，它什麼也不做。我甚至在一個新的空白括號項目中對它進行了測試，但仍然無法將其打開。

代碼包含在jfiddle以及波紋管

任何幫助是極大的讚賞，並感謝您的時間！

https://jsfiddle.net/TonyTheOnly/7ha214r0/1/

$(document).ready(function(){ 
 
    
 
     $(".burger-nav").on("click", function(){ 
 
      
 
      $("nav ul").toggleClass("open"); 
 
     }); 
 
});

header { 
 
    background: white; 
 
    padding-bottom: 20px; 
 
    
 
    
 
} 
 

 

 
nav { 
 
    float: right; 
 
    padding-right: 10% 
 
} 
 

 
nav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    
 
} 
 

 
nav li { 
 
    display: inline-block; 
 
    margin-left: 35px; 
 
    padding-top: 25px; 
 
    
 
    position: relative; 
 
    
 
} 
 

 
nav a { 
 
    color: #444; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-size: 24px; 
 
} 
 

 
nav a:hover { 
 
    color: #000; 
 
    
 
} 
 

 
nav a::before { 
 
    content: ''; 
 
    display: block; 
 
    height: 10px; 
 
    width: 0%; 
 
    background-color: #444; 
 
    
 
    position: absolute; 
 
    top: 0; 
 
    transition: all ease-in-out 150ms; 
 
} 
 

 
nav a:hover::before { 
 
    width: 100%; 
 
} 
 
@media only screen and (max-width:480px) { 
 
    
 
    .burger-nav{ 
 
    display: block; 
 
    height: 40px; 
 
    width: 40px; 
 
    float: right; 
 
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"); 
 
    background-size: cover; 
 
    cursor: pointer; 
 
    } 
 
    
 
    .wrapper { 
 
     width: 100%; 
 
     padding: 0; 
 
    } 
 
    
 
    nav ul { 
 
     overflow: hidden; 
 
     background: white; 
 
     height:0; 
 
     
 
    } 
 

 
    nav ul.open { 
 
     height: auto; 
 
    } 
 
    nav ul li{ 
 
     float:none; 
 
     text-align: left; 
 
     width: 100%; 
 
     margin: 0; 
 
     
 
    } 
 
    nav ul li a { 
 
     color: black; 
 
     padding: 10px; 
 
     display: block; 
 
     margin: 0; 
 
    } 
 

 

 
} 
 

 
@media only screen and (max-width:1050px) { 
 
     
 
    .burger-nav{ 
 
    display: block; 
 
    height: 40px; 
 
    width: 40px; 
 
    float: right; 
 
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"); 
 
    background-size: cover; 
 
    cursor: pointer; 
 
    } 
 
    
 
    .wrapper { 
 
     width: 100%; 
 
     padding: 0; 
 
    } 
 
    
 
    nav ul { 
 
     overflow: hidden; 
 
     background: white; 
 
     height:0; 
 
     
 
    } 
 

 
    nav ul.open { 
 
     height: auto; 
 
    } 
 
    nav ul li{ 
 
     float:none; 
 
     text-align: left; 
 
     width: 100%; 
 
     margin: 0; 
 
     
 
    } 
 
    nav ul li a { 
 
     color: black; 
 
     padding: 10px; 
 
     display: block; 
 
     margin: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<title>Responsive menu</title> 
 
    <div class="container"> 
 
    <nav> 
 
     <a class="burger-nav"></a> 
 
     <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Services</a></li> 
 
      <li><a href="#">Blog</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
    </div>

Answer 1

這是你要實現的目標是什麼？它在我的本地主機上正常工作，我把它放在一個文件index.php中。

確保你調用你的CSS和JS文件的方式是正確的，也嘗試強制刷新你的瀏覽器CTRL F5。這應該是顯而易見的，但只要確保您連接到互聯網。並注意我使用崇高的文字，因爲它比括號更容易使用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<title>Responsive menu</title> 
    <div class="container"> 
    <nav> 
     <a class="burger-nav"></a> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
    </div> 


<script type="text/javascript"> 
     $(document).ready(function(){ 

     $(".burger-nav").on("click", function(){ 

      $("nav ul").toggleClass("open"); 
     }); 
}); 
</script> 


<style type="text/css"> 

header { 
    background: white; 
    padding-bottom: 20px; 


} 


nav { 
    float: right; 
    padding-right: 10% 
} 

nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 

} 

nav li { 
    display: inline-block; 
    margin-left: 35px; 
    padding-top: 25px; 

    position: relative; 

} 

nav a { 
    color: #444; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 24px; 
} 

nav a:hover { 
    color: #000; 

} 

nav a::before { 
    content: ''; 
    display: block; 
    height: 10px; 
    width: 0%; 
    background-color: #444; 

    position: absolute; 
    top: 0; 
    transition: all ease-in-out 150ms; 
} 

nav a:hover::before { 
    width: 100%; 
} 
@media only screen and (max-width:480px) { 

    .burger-nav{ 
    display: block; 
    height: 40px; 
    width: 40px; 
    float: right; 
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"); 
    background-size: cover; 
    cursor: pointer; 
    } 

    .wrapper { 
     width: 100%; 
     padding: 0; 
    } 

    nav ul { 
     overflow: hidden; 
     background: white; 
     height:0; 

    } 

    nav ul.open { 
     height: auto; 
    } 
    nav ul li{ 
     float:none; 
     text-align: left; 
     width: 100%; 
     margin: 0; 

    } 
    nav ul li a { 
     color: black; 
     padding: 10px; 
     display: block; 
     margin: 0; 
    } 


} 

@media only screen and (max-width:1050px) { 

    .burger-nav{ 
    display: block; 
    height: 40px; 
    width: 40px; 
    float: right; 
    background: url("https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"); 
    background-size: cover; 
    cursor: pointer; 
    } 

    .wrapper { 
     width: 100%; 
     padding: 0; 
    } 

    nav ul { 
     overflow: hidden; 
     background: white; 
     height:0; 

    } 

    nav ul.open { 
     height: auto; 
    } 
    nav ul li{ 
     float:none; 
     text-align: left; 
     width: 100%; 
     margin: 0; 

    } 
    nav ul li a { 
     color: black; 
     padding: 10px; 
     display: block; 
     margin: 0; 
    } 
} 
</style>