单击后打开和关闭jQuery功能

Question

I'm using 2 jquery codes on my website.

first code is :

    function  bottom_open() {


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

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

    }

and the second one is :

    function  bottom_close() {



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

}

what I'm trying to do is when first function is executed (by a click function), unbind the function, and when the second function is then executed, rebind the 1st function. I can't find a way of doin it.

here is what I've tried :

function bottom_cartouche(){

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

/ FIRST ACTION, when ".cartouche_bottom_inside" is clicked, execute function bottom_open() and then unbind bottom_open(). So if we click again on ".cartouche_bottom_inside" bottom_open() will not be executed. /

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

/ then SECOND ACTION, when ".bottom_close" is clicked exectude the second function bottom_close() and rebind first function bottom_open(). So if we click again on ".cartouche_bottom_inside", bottom_open() will be executed /

    $('.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();
    }
}

Here is an explaination :

FIRST ACTION, when ".cartouche_bottom_inside" is clicked, execute function bottom_open() and then unbind bottom_open(). So if we click again on ".cartouche_bottom_inside" bottom_open() will not be executed.

then SECOND ACTION, when ".bottom_close" is clicked exectude the second function bottom_close() and rebind first function bottom_open() So if we click again on ".cartouche_bottom_inside", bottom_open() will be executed... and so on...

I can't find out what I'm doing wrong.

Can anybody help me with this ?

thanks a lot for your time and for your help,

Answer 1

You could probably bind the functions to certain classes, and then add the classes and remove them as needed to your elements in the appropriate places.

EDIT: Also, it looks like you have a typo here:

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

should be (notice the missing '.' on your selector):

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

Answer 2

I would just add and remove a class with something like:

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

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

})

Answer 3

try this

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

?