Question

即使汉堡包正在失去知名度，我也会制作一个菜单图标，点击后会'变身'为'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>

Answer 1

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

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

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

1 个答案: