Javascript/jQuery 事件处理程序未加载

我在使用 jQuery 时遇到问题，$(document).ready() 中的代码块无法加载。我已经调查过了，但没能找到解决办法。我在“事件监听器”选项卡中使用 chrome“检查元素”工具查看了它，对于具有事件链接的对象没有任何内容。

我正在使用方括号，Jslint 给我错误:第一行代码“$ was used before it was defined”。这是我的 HTML 代码和 Js/jQuery 代码:

HTML

<head>
    <script type="text/javascript" src="JS/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="JS/Java.js"></script>
    <style>
     #login{
        display:;
        font-size: 18;
        left: 80%;
        top: 28%;
    }

    #login:hover{
        opacity: 0.4;
        cursor: pointer;
    }

    #nav-icon{
        width: 20px;
        height: 15px;
        position: relative;
        top: 30%;
        left: 90%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }

    #nav-icon span{
        display: block;
        position: relative;
        height: 1px;
        width: 100%;
        background: #ffffff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    #nav-icon span:nth-child(1) {
        top: 0px;
    }

    #nav-icon span:nth-child(2) {
        top: 6px;
    }

    #nav-icon span:nth-child(3) {
        top: 12px;
    }

    #nav-icon.open span:nth-child(1) {
      top: 4.5px;
      left: 100;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
    }

    #nav-icon.open span:nth-child(2) {
      opacity: 0;
      left: -60px;
    }

    #nav-icon.open span:nth-child(3) {
      top: 3px;
      left: 100;
      -webkit-transform: rotate(-135deg);
      -moz-transform: rotate(-135deg);
      -o-transform: rotate(-135deg);
      transform: rotate(-135deg);
    }

    #menubar{
        display:;
        position: absolute;
        top: 0;
        height: 100%;
        width: 15%;
        left: 50%;
        background-color: rgba(0, 0, 0, 0.85);
        z-index: 2;
        font-family: main;
        font-size: 20;
        color: fff;
        list-style: none;
        line-height: 2;   
    }
    </style>
</head>

<body>

    <div id="HeaderContainer">
        <div class=header id="login">
            <li>Login</li>
        </div>

        <div id="nav-icon">
          <span></span>
          <span></span>
          <span></span>
        </div>
    </div>


    <div id="menubar">
        <li>Login</li>
        <li>My Account</li>
        <li>My Wishlist</li>
        <li>My Orders</li> 
    </div>

</body>

Js/jQuery

$(document).ready(function () {
    $('#nav-icon').click(function () {
        $(this).toggleClass('open');
        $('#menubar').animate({left: 'toggle'}, -30%);
        $('#login').fadeToggle(fast);
    });
});

HTML 和 JS 在不同的文件中，我知道这两个 JS 文件都正确链接到 HTML 文件。 alert() 放在第一行，在任何其他代码工作之前。

我想要发生的事情: 我希望汉堡菜单 (#nav-icon) 在单击时切换 CSS 类“打开”。当我现在点击它时没有任何反应。

在此先感谢您提供的任何帮助!

PS:我是新来的，如果我搞砸了，请见谅。

最佳答案

, -30% 在 $('#menubar').animate({left: 'toggle'}, - 30%); ?

$(document).ready(function () {
    $('#nav-icon').click(function () {
        $(this).toggleClass('open');
        $('#menubar').animate({left: 'toggle'}, 1000);
        $('#login').fadeToggle("fast");
    });
});

#login {
       display: ;
       font-size: 18;
       left: 80%;
       top: 28%;
     }
     #login:hover {
       opacity: 0.4;
       cursor: pointer;
     }
     #nav-icon {
       width: 20px;
       height: 15px;
       position: relative;
       top: 30%;
       left: 90%;
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       -webkit-transition: .5s ease-in-out;
       -moz-transition: .5s ease-in-out;
       -o-transition: .5s ease-in-out;
       transition: .5s ease-in-out;
       cursor: pointer;
     }
     #nav-icon span {
       display: block;
       position: relative;
       height: 1px;
       width: 100%;
       background: #ffffff;
       border-radius: 9px;
       opacity: 1;
       left: 0;
       -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
       -webkit-transition: .25s ease-in-out;
       -moz-transition: .25s ease-in-out;
       -o-transition: .25s ease-in-out;
       transition: .25s ease-in-out;
     }
     #nav-icon span:nth-child(1) {
       top: 0px;
     }
     #nav-icon span:nth-child(2) {
       top: 6px;
     }
     #nav-icon span:nth-child(3) {
       top: 12px;
     }
     #nav-icon.open span:nth-child(1) {
       top: 4.5px;
       left: 100;
       -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
       -o-transform: rotate(135deg);
       transform: rotate(135deg);
     }
     #nav-icon.open span:nth-child(2) {
       opacity: 0;
       left: -60px;
     }
     #nav-icon.open span:nth-child(3) {
       top: 3px;
       left: 100;
       -webkit-transform: rotate(-135deg);
       -moz-transform: rotate(-135deg);
       -o-transform: rotate(-135deg);
       transform: rotate(-135deg);
     }
     #menubar {
       display: ;
       position: absolute;
       top: 0;
       height: 100%;
       width: 15%;
       left: 50%;
       background-color: rgba(0, 0, 0, 0.85);
       z-index: 2;
       font-family: main;
       font-size: 20;
       color: fff;
       list-style: none;
       line-height: 2;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HeaderContainer">
        <div class=header id="login">
            <li>Login</li>
        </div>

        <div id="nav-icon">
          <span>a</span>
          <span>b</span>
          <span>c</span>
        </div>
    </div>


    <div id="menubar">
        <li>Login</li>
        <li>My Account</li>
        <li>My Wishlist</li>
        <li>My Orders</li> 
    </div>

关于Javascript/jQuery 事件处理程序未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30966661/

Javascript/jQuery 事件处理程序未加载

上一篇：html - 在可伸缩表格中包装文本

下一篇：javascript - 自定义元素分隔符怪异