jquery - 更改CSS类后，jQuery功能将无法使用

实际上，CSS类更改后，我在使用函数时遇到了一些麻烦。

这是我的代码。

<html>
<head>
    <title>jQuery Animate Test</title>
    <style>
    .animatebox { width: 300px; margin: auto; height: 50px; background: grey; position: absolute; bottom: 250; padding-left: 10px;}
    .hiddenstuff { opacity: 0; }
    .boxtitle { font-size: 18px; font-weight: 100;}
    .clear { clear: both;}
    .arrow_up { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
    .arrow_down { float: right; margin: 7px 0 0 125px; padding-right: 10px;}
    p {margin: 15px 0 0 0;}
    </style>
    <script src="jquery-1.8.2.js"></script>

</head>
<body>

<h1>Animate Test</h1>
<div id="content">
<div class="animatebox">
<img class="arrow_up" height="35px" src="arrow_up.png"><p class="boxtitle">Lala Box</p>
<div class="clear"></div>
<p class="hiddenstuff">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata </p>
</div>
</div>


<script>

$(function() {
$('.arrow_up').click(function(){
   $('.arrow_up').attr('src',"arrow_down.png");
});
$('.arrow_up').click(function () {
    $('.arrow_up').addClass('arrow_down');
});
$('.arrow_up').click(function () {
    $('.arrow_up').removeClass('arrow_up');
});
});

$(".arrow_up").click(function () {
    $('.animatebox').animate ({
        height: '250px'
    }, 200 );
});

$(".arrow_up").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );
});

$(".arrow_up").click(function () {
    $('.boxtitle').animate ({
        fontSize: '28px',
        fontWeight: '700'
    }, 200 );
});

$(".arrow_down").click(function () {
    $('.animatebox').animate ({
        height: '50px'
    }, 200 );

});

$(".arrow_down").click(function () {
    $('.hiddenstuff').animate ({
        opacity: '0'
    }, 200 );
});


$(".arrow_down").click(function () {
    $('.boxtitle').animate ({
        fontSize: '18px',
        fontWeight: '100'
    }, 200 );
});




</script>

</body>
</html>

单击向上按钮一次后，它将类更改为“ arrow_down”，但是向下动画的功能将无法正常工作？！？：/

更新

$("body").on("click", ".arrow_up", function () {
        $('.arrow_up').attr('src',"arrow_down.png");
        $('.arrow_up').addClass('arrow_down');
        $('.arrow_up').removeClass('arrow_up');

        $('.animatebox').animate ({
            height: '250px'
        }, 200 );

        $('.hiddenstuff').animate ({
            opacity: '1'
        }, 200 );

        $('.boxtitle').animate ({
            fontSize: '28px',
            fontWeight: '700'
        }, 200 );
    });

    $("body").on("click", ".arrow_down", function () {
        $('.arrow_down').attr('src',"arrow_up.png");
        $('.arrow_down').addClass('arrow_up');
        $('.arrow_down').removeClass('arrow_down');

        $('.animatebox').animate ({
            height: '50px'
        }, 200 );

        $('.hiddenstuff').animate ({
            opacity: '0'
        }, 200 );

        $('.boxtitle').animate ({
            fontSize: '18px',
            fontWeight: '100'
        }, 200 );
    });

最佳答案

由于它是动态的，请使用on。另外，您可以将代码缩短一些：

$("body").on("click", ".arrow_up", function () {
    $('.arrow_up').attr('src',"arrow_down.png");
    $('.arrow_up').addClass('arrow_down');
    $('.arrow_up').removeClass('arrow_up');

    $('.animatebox').animate ({
        height: '250px'
    }, 200 );

    $('.hiddenstuff').animate ({
        opacity: '1'
    }, 200 );

    $('.boxtitle').animate ({
        fontSize: '28px',
        fontWeight: '700'
    }, 200 );
});

$("body").on("click", ".arrow_down", function () {
    $('.animatebox').animate ({
        height: '50px'
    }, 200 );

    $('.hiddenstuff').animate ({
        opacity: '0'
    }, 200 );

    $('.boxtitle').animate ({
        fontSize: '18px',
        fontWeight: '100'
    }, 200 );
});

您不需要为每件事做事件处理程序。这样就可以了（性能可能会更好）

这是工作中的jsFiddle