移动菜单在Jfiddle中运行，但在本地主机

Question

我正在创建一个响应式移动菜单，使用toggleClass函数打开菜单。我让它在Jfiddle工作甚至轰鸣声但是每次我点击括号中的实时预览中的导航图标它什么都不做。我甚至在一个新的空白括号项目中进行了测试，仍然无法点击它打开。

包含在jfiddle和bellow中的代码

非常感谢任何帮助，感谢您的时间！

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上工作正常，我把它全部放在一个文件index.php。

确保您调用css和js文件的方式是正确的，同时尝试强制刷新浏览器ctrl f5。这应该是显而易见的，但只是为了确保，确保您已连接到互联网。并注意我使用sublime文本，因为它比括号更容易使用我。

<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>