Question

我在使用jQuery时遇到问题，$(document).ready()内的代码块无法加载。我已经调查过，但未能找到解决方案。我在事件监听器选项卡中使用chrome“inspect element”工具查看了它，没有任何东西可以链接到与之关联的事件。

我正在使用括号，并且Jslint在第一行代码中给出了错误：“在定义之前使用了$”。这是我的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：我是新来的，如果我搞砸了什么就很抱歉。

Answer 1

, -30%在duration处似乎无效$('#menubar').animate({left: 'toggle'}, -30%);？

＆＃13;

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

＆＃13;

#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;
     }

＆＃13;

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

＆＃13;

Answer 2

这条线错了。 $('#login').fadeToggle(fast);

在jQuery中没有像fast这样的东西正确的方式是这样的：

$('#login').fadeToggle('fast');

你必须使用fast作为字符串。

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

2 个答案: