我做错了什么？/使用jQuery返回状态_Jquery_Html_Menu_Icons

我做错了什么？/使用jQuery返回状态

jquery html menu

我做错了什么？/使用jQuery返回状态,jquery,html,menu,icons,Jquery,Html,Menu,Icons,尽管汉堡包越来越不受欢迎，但我正在制作一个菜单图标，当点击时，它会变成一个“X”，但当再次点击时，我无法将其恢复到原始状态有了这个，我想稍后调用i菜单进入视图，所以如果有更好的方法来实现这个效果，请让我知道 <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="http://static.tumblr.c

尽管汉堡包越来越不受欢迎，但我正在制作一个菜单图标，当点击时，它会变成一个“X”，但当再次点击时，我无法将其恢复到原始状态

有了这个，我想稍后调用i菜单进入视图，所以如果有更好的方法来实现这个效果，请让我知道

<html>
    <head>
        <title></title>

        <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/majy1x4/u18mpz8h2/reset.styles.css">

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

        <style type="text/css">

        *{}

        body{}

        .icon-wrapper{
            position: relative;
            top: 10px;
            left: 10px;
            height: 14px;
            width: 20px;
            z-index: 2;
            -webkit-transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

        .top{
            height: 2px;
            width: 20px;
            background: rgba(0,0,0,0.8);
            position: absolute;
            top: 0;
            left: 0;
            cursor: pointer;
        }

        .middle{
            height: 2px;
            width: 20px;
            background: rgba(0,0,0,0.8);
            position: absolute;
            top: 6px;
            left: 0;
            cursor: pointer;
        }

        .bottom{
            height: 2px;
            width: 20px;
            background: rgba(0,0,0,0.8);
            position: absolute;
            top: 12px;
            left: 0;
            cursor: pointer;
        }

        .rotatedown{
            -webkit-transform: rotate(-45deg);
            -webkit-transition: all 0.2s ease-in-out;
            top: 6px;
        }

        .rotateup{
            -webkit-transform: rotate(45deg);
            -webkit-transition: all 0.2s ease-in-out;
            top: 6px;
        }



        </style>
    </head>
    <body>
    <div class="icon-wrapper">

        <div class="top"></div>

        <div class="middle"></div>

        <div class="bottom"></div>

    </div>


    <script type="text/javascript">

        $('.icon-wrapper').click(aniOpen);
        $('.top').click(aniOpen);
        $('.middle').click(aniOpen);
        $('.bottom').click(aniOpen);
        $('.rotateup').click(aniClose);
        $('.rotatedown').click(aniClose);
        $('.close').click(aniClose);

        function aniOpen(){
            $('.middle').fadeOut('fast');
            $('.top').addClass('rotatedown');
            $('.bottom').addClass('rotateup');
            $('.icon-wrapper').addClass('close');
        }

        function aniClose(){
            $('.middle').fadeIn('fast');
            $('.top').addClass('rotatedown');
            $('.bottom').removeClass('rotateup');
            $('.close').removeClass('close');
        }




    </script>
    </body>
</html>


*{}
主体{}
.图标包装{
位置：相对位置；
顶部：10px；
左：10px；
高度：14px；
宽度：20px；
z指数：2；
-webkit转换：所有0.2秒易入易出；
光标：指针；
}
.顶{
高度：2倍；
宽度：20px；
背景：rgba（0,0,0,0.8）；
位置：绝对位置；
排名：0；
左：0；
光标：指针；
}
.中{
高度：2倍；
宽度：20px；
背景：rgba（0,0,0,0.8）；
位置：绝对位置；
顶部：6px；
左：0；
光标：指针；
}
.底部{
高度：2倍；
宽度：20px；
背景：rgba（0,0,0,0.8）；
位置：绝对位置；
顶部：12px；
左：0；
光标：指针；
}
.旋转向下{
-webkit变换：旋转（-45度）；
-webkit转换：所有0.2秒易入易出；
顶部：6px；
}
.轮换{
-webkit变换：旋转（45度）；
-webkit转换：所有0.2秒易入易出；
顶部：6px；
}
$（'.icon wrapper'）。单击（打开）；
$（'.top'）。单击（打开）；
$（'.middle'）。单击（打开）；
$（'.bottom'）。单击（打开）；
$（'.rotateup'）。单击（关闭）；
$（'.rotatedown'）。单击（关闭）；
$（'.close'）。单击（关闭）；
函数aniOpen（）{
$（'.middle'）.fadeOut（'fast'）；
$（'.top'）.addClass（'rotatedown'）；
$（'.bottom'）.addClass（'rotateup'）；
$（'.icon wrapper'）.addClass（'close'）；
}
函数（）{
$（'.middle'）.fadeIn（'fast'）；
$（'.top'）.addClass（'rotatedown'）；
$（'.bottom'）.removeClass（'rotateup'）；
$（'.close'）.removeClass（'close'）；
}

使用toggleClass而不是addClass。。将其附加到单击事件

$(function(){
$('.element').click(function(){
    $('.class-to-be-switched').toggleClass("class-name");
});
});