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来绑定事件，

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");
    });
});

jQuery addclass，removeclass和click事件问题（代码）

1 个答案: