点击后jquery开启和关闭功能答案

【问题标题】：jquery on and off function after click点击后jquery开启和关闭功能
【发布时间】：2014-12-12 17:29:22
【问题描述】：

我在我的网站上使用了 2 个 jquery 代码。

第一个代码是：

    function  bottom_open() {


        $('.cartouche_bottom').css('position','absolute').animate({
        top :$(".top_table").height() - 1,
        });

        $('.bottom_close').show();
        //$('.layout_bottom').stop().animate({height :0});

    }

第二个是：

    function  bottom_close() {



        $('.cartouche_bottom').css('position','fixed').animate({
        top : cartouche_bottom_position
    });
        $('.bottom_close').hide();
}

}

我要做的是在执行第一个函数时（通过单击函数），取消绑定该函数，然后执行第二个函数时，重新绑定第一个函数。我找不到办法。

这是我尝试过的：

function bottom_cartouche(){

    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();

/FIRST ACTION，当点击“.cartouche_bottom_inside”时，执行函数bottom_open()然后解除bottom_open()的绑定。所以如果我们再次点击“.cartouche_bottom_inside”bottom_open()将不会被执行。/

    $('.cartouche_bottom_inside').click(function(){
    bottom_open();
    $(this).off('click');
    });

/然后是第二个动作，当单击“.bottom_close”时，执行第二个函数 bottom_close() 并重新绑定第一个函数 bottom_open()。所以如果我们再次点击“.cartouche_bottom_inside”，bottom_open()就会被执行/

    $('.bottom_close').click(function(){
    bottom_close();
    $('cartouche_bottom_inside').on('click');

    });

        function  bottom_open() {


            $('.cartouche_bottom').css('position','absolute').animate({
            top :$(".top_table").height() - 1,
            });

            $('.bottom_close').show();
            //$('.layout_bottom').stop().animate({height :0});

        }

        function  bottom_close() {



            $('.cartouche_bottom').css('position','fixed').animate({
            top : cartouche_bottom_position
        });
            $('.bottom_close').hide();
    }
}

这是一个解释：

FIRST ACTION，当点击“.cartouche_bottom_inside”时，执行函数bottom_open()然后解除bottom_open()的绑定。所以如果我们再次点击“.cartouche_bottom_inside”，bottom_open() 将不会被执行。

然后第二个动作，当单击“.bottom_close”时，执行第二个函数bottom_close（）并重新绑定第一个函数bottom_open（）所以如果我们再次点击“.cartouche_bottom_inside”，bottom_open()就会被执行……以此类推……

我不知道我做错了什么。

有人可以帮我吗？

非常感谢您的时间和帮助，

【问题讨论】：

这条线$('cartouche_bottom_inside').on('click');不会做任何事情。
正如@Mathletics 指出的那样， .on('click') 是一种方法，而不是事件。首先，您没有“.”。其次，如果要模拟点击，应该使用$('.carttouche_bottom_inside').click()。

标签： javascript jquery function bind unbind

【解决方案1】：

您可以将这些函数绑定到某些类，然后根据需要将这些类添加到您的元素中的适当位置。

编辑：另外，您这里好像有错字：

$('.bottom_close').click(function(){
    bottom_close();
    $('cartouche_bottom_inside').on('click');
});

应该是（注意选择器上缺少的“.”）：

$('.bottom_close').click(function(){
    bottom_close();
    $('.cartouche_bottom_inside').on('click');
});

【讨论】：

【解决方案2】：

我只想添加和删除一个类，例如：

    $('#buttonhere').click(function (e) {

    if ($(this).hasClass('firstPart')) {
        // Do one part.
        bottom_open();
        $(this).toggleClass('firstPart');
    }
    else {
        bottom_close();
        $(this).toggleClass('firstPart');
    }

})

【讨论】：

【解决方案3】：

试试这个

$('.bottom_close').click(function(){
  bottom_close();
  $('.cartouche_bottom_inside').on('click', function() {bottom_open() });
});

【讨论】：