jQuery addclass、removeclass 和 click 事件问题(代码)

Question

jQuery(document).ready(function () {
    jQuery('.isSocial').click(function () {
        var hidden = jQuery('.socialHidden');
        hidden.animate({
            "top": "35px"
        }, 400);
        jQuery(".socialHidden>div").delay(400).animate({
            opacity: "1"
        }, 150);
        jQuery(".isSocial").addClass("closejs").removeClass("isSocial");
        return false;
    });
    jQuery('.closejs').click(function () {
        var hidden = jQuery('.socialHidden');
        hidden.delay(200).animate({
            "top": "-176px"
        }, 400);
        jQuery(".socialHidden>div").animate({
            opacity: "0"
        }, 150);
        jQuery(".closejs").addClass("isSocial").removeClass("closejs");
    });
});

谁能帮我修复这个代码吗？第一部分工作完美...当我尝试让第二部分工作时，它什么也没做。

这是 html:

    <button class="isSocial">BUTTON</button>
    <div class="socialHidden">
    <div>
    content.....
    </div>
    </div>

Answer 1

由于您要动态更改类，因此应该使用 event delegation对于绑定(bind)事件，

jQuery(document).ready(function () {
    jQuery(document).on("click", '.isSocial', function () {
        var hidden = jQuery('.socialHidden');
        hidden.animate({
            "top": "35px"
        }, 400);
        jQuery(".socialHidden>div").delay(400).animate({
            opacity: "1"
        }, 150);
        jQuery(".isSocial").addClass("closejs").removeClass("isSocial");
        return false;
    });
    jQuery(document).on("click", '.closejs', function () {
        var hidden = jQuery('.socialHidden');
        hidden.delay(200).animate({
            "top": "-176px"
        }, 400);
        jQuery(".socialHidden>div").animate({
            opacity: "0"
        }, 150);
        jQuery(".closejs").addClass("isSocial").removeClass("closejs");
    });
});