モバイルメニューはJfiddleで動作していますが、ローカルホストでは動作していません

Question

私はtoggleClass関数を使ってメニューを開くレスポンシブモバイルメニューを作成していました。私はそれがJfiddleで働いていて、さらに腹を立てますが、毎回ブラケット内のライブプレビューでnavアイコンをクリックすると何もしません。私は新しい空白の括弧のプロジェクトでそれをテストし、まだそれを開くことができません。

コードは

怒鳴る

と同様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

あなたが達成しようとしている何本か？私のlocalhost上で正常に動作し、私は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>