幻灯片菜单Javascript不工作_Javascript_Jquery_Css_Menu_Slide

幻灯片菜单Javascript不工作

javascript jquery css menu

幻灯片菜单Javascript不工作,javascript,jquery,css,menu,slide,Javascript,Jquery,Css,Menu,Slide,我一直试图用jQuery创建一个滑动菜单，但在第5行和第6行中出现了错误——函数没有定义。有人能看出我的代码有什么问题吗 // jQuery(document).ready(function($) { jQuery(function($) { "use strict"; $(document).ready(function () { $nav_list = $('#nav_list'); $menuLeft = $('.pushmenu-left');

我一直试图用jQuery创建一个滑动菜单，但在第5行和第6行中出现了错误——函数没有定义。有人能看出我的代码有什么问题吗

 // jQuery(document).ready(function($) {
jQuery(function($) {
 "use strict";
    $(document).ready(function () {
        $nav_list = $('#nav_list');
        $menuLeft = $('.pushmenu-left');


        $nav_list.click(function () {
            $(this).toggleClass('active');
            $('.pushmenu-push').toggleClass('pushmenu-push-toright');
            $menuLeft.toggleClass('pushmenu-open');
        });
    });
});

以下是HTML：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DogHouse</title>


<script type="text/javascript" src="PushMenuJS.js"></script>

<link href="PushMenuCSS.css" rel="stylesheet" type="text/css">
</head>

<body class="pushmenu-push">
    <nav class="pushmenu pushmenu-left">
         <h3>Menu</h3>    
    </nav>
    <div class="container">
        <div class="main">
            <section class="buttonset">
                <div id="nav_list">Menu</div>
                <!-- End Content -->
        </div>
        <!-- End Main -->
    </div>
    <!-- End Container -->
        </body>
</html>

抱歉，我知道我提供的太多了

谢谢您使用的是严格模式。不能仅通过为全局变量赋值来创建全局变量

您必须使用

var

声明它。由于您不需要变量的全局作用域，只需在现有行前面加上

var

错误是什么？$nav_list未定义$menuLeft未定义我们的HTML代码，不仅仅是jQuery，那么我们就可以帮到您

$nav_list

和

$menuLeft

实际上是未定义的。您将它们视为隐式全局变量，这在严格模式下是不允许的。我刚刚添加了一些前缀，这些前缀消除了错误，但是当单击时菜单仍然拒绝滑动。这是另一个问题，可能与您没有向我们展示的CSS有关。您希望我提供CSS的哪一部分？对不起，我不知道应该引起你想要的结果的部分。

.pushmenu a {
    display: block;
}
.pushmenu-left {
    left: -240px;
}
.pushmenu-left.pushmenu-open {
    left: 0;
}
.pushmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}
.pushmenu-push-toright {
    left: 240px;
}
 .pushmenu, .pushmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
nav-list.active {
    background-position: -33px top;
}