Question

我在我的网站上使用了三个jQuery函数。

在我的function.js文件中，我还使用document.ready来调用我的函数。

这是我的jQuery代码：

$(document).ready(function() {
    bottom_cartouche();
    pre_scroll_cartouche_top();
    pre_scroll_cartouche_bottom();
});

function pre_scroll_cartouche_top() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- TOP ---------------------------------------------------*/

    $('.cartouche_top').on("mouseenter", function() {
        $('.cartouche_top').stop().animate({
            top: -$('.cartouche_top').height() + $('.cartouche_fixed').height()
        });

        $('.archives_open').on('click', function() {
            $('.cartouche_top').stop().animate({
                top: '0px'
            }, function() {
                $('.cartouche_fixed').addClass('active');
            });
            $('.archive_close').css('opacity', '1');
        });

        $('.archive_close').on('click', function() {
            $('.archive_close').css('opacity', '0');

            $('.cartouche_fixed').removeClass('active');

            $('.cartouche_top').stop().animate({
                top: cartouche_top_position
            });
        });
    });

    $('.cartouche_top').on("mouseleave", function() {
        $('.cartouche_fixed').removeClass('active');
        $('.cartouche_top').stop().animate({
            top: cartouche_top_position
        });
    });
}

function pre_scroll_cartouche_bottom() {
    var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
    var cartouche_fixed_H = $('.cartouche_fixed').height();
    var cartouche_top_position = -($('.cartouche_top').height() - $('.top_table').height());

    /*----------------------------- BOTTOM ---------------------------------------------------*/

    $('.cartouche_bottom').on("mouseenter", function() {
        $('.layout_bottom').slideUp();

        $('.cartouche_bottom').stop().animate({
            top: $(window).height() / 1.5
        });
    });

    $('.cartouche_bottom').on("mouseleave", function() {
        $('.layout_bottom').slideDown();

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

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

    $('.cartouche_bottom_inside').on('click', function(e) {
        e.preventDefault();

        if (!$(this).is('.active')) {
            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({
                'position': 'absolute',
                'cursor': 'text',
                'left': '0'
            }).animate({
                top: $(".top_table").height();
            });

            $('.bottom_close').show();
            $(this).addClass('active');
        }
    });

    $('.bottom_close').click(function() {
        $('.cartouche_bottom').css({
            'position': 'fixed',
            'cursor': 'context-menu'
        }).animate({
            top: cartouche_bottom_position
        }, function() {
            $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();
    });
}

我正在尝试在第3个函数中添加开/关动作（函数bottom_cartouche（））。

我希望，当“$('.cartouche_bottom_inside').on('click', function(e){”时禁用功能pre_scroll_cartouche_top()和pre_scroll_cartouche_bottom()

当“$('.bottom_close').click(function(){”再次启用2个功能时。

我尝试使用on / off，绑定和取消绑定，但我找不到让它工作的方法。

这是我尝试过的：

    function bottom_cartouche(){

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

    $('.cartouche_bottom_inside').on('click', function(e){

        e.preventDefault();

        if( !$(this).is('.active') ){

// DISABLE //

    $('.cartouche_top').off('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').off('mouseleave',pre_scroll_cartouche_bottom());

// END DISABLE //

            $('.layout_bottom').slideUp();

            $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({

            top :$(".top_table").height();

            });

            $('.bottom_close').show();

            $(this).addClass('active');

        }

    });

    $('.bottom_close').click(function(){

// ENABLE //

    $('.cartouche_top').on('mouseenter',pre_scroll_cartouche_top());
    $('.cartouche_bottom').on('mouseleave',pre_scroll_cartouche_bottom());

// END ENABLE //

        $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({

            top : cartouche_bottom_position

            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });

        $('.bottom_close').hide();

        $('.layout_bottom').slideDown();

    });

    }

尝试禁用时，仅禁用第1个功能，再次启用，它根本不起作用...

有人可以帮我吗？

Answer 1

我使用if语句和2个变量（flag_top＆amp; flag_bottom）使用不同的方法找到了解决方案。这是我的代码，也许它可以帮助：

function pre_scroll_cartouche_top(){


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_top = 0;
        /*----------------------------- TOP ---------------------------------------------------*/

        $('.cartouche_top').on("mouseenter", function(){
            if(flag_top==0){
                $('.cartouche_top').stop().animate({top : -$('.cartouche_top').height()+$('.cartouche_fixed').height()});

                $('.archives_open').on('click', function(){
                    flag_top = 1;

                    $('.cartouche_top').stop().animate({top : '0px'},function(){

                        $('.cartouche_fixed').addClass('active');

                    });

                    $('.archive_close').css('opacity','1');

                });

                $('.archive_close, .index_tableau a').on('click', function(){
                    flag_top = 0;
                    $('.archive_close').css('opacity','0');

                    $('.cartouche_fixed').removeClass('active');

                    $('.cartouche_top').stop().animate({top : cartouche_top_position});


                });
            }
        });

        $('.cartouche_top').on("mouseleave", function() {
            if(flag_top==0){
                    $('.cartouche_fixed').removeClass('active');
                    $('.cartouche_top').stop().animate({top : cartouche_top_position});
            }

        });
    }

    function bottom_cartouche(){

        /*----------------------------- PRE SCROLL BOTTOM ---------------------------------------------------*/


        var cartouche_bottom_position = $(window).height() - $('.top_table').height() - $('.layout_bottom').height();
        var cartouche_fixed_H = $('.cartouche_fixed').height();
        var cartouche_top_position = - ($('.cartouche_top').height()-$('.top_table').height());
        var flag_bottom = 0;
        /*----------------------------- MOUSEENTER ---------------------------------------------------*/


        $('.cartouche_bottom').on("mouseenter", function(){
            if(flag_bottom==0) {
                        $('.layout_bottom').slideUp();

            $('.cartouche_bottom').stop().animate({top :$(window).height()/1.5});
    }
        });

        /*----------------------------- MOUSELEAVE ---------------------------------------------------*/

        $('.cartouche_bottom').on("mouseleave", function(){
            if(flag_bottom==0) {
            $('.layout_bottom').slideDown();

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

}

        });


        /*----------------------------- OUVERTURE BOTTOM ---------------------------------------------------*/

        $('.cartouche_bottom_inside').on('click', function(e){
            e.preventDefault();
            if( !$(this).is('.active') ){
                            flag_bottom=1;

                $('.layout_bottom').slideUp();
                //$('.slideshow').css('position','initial');
                $('.cartouche_bottom').css({'position' : 'absolute', 'cursor' : 'text', 'left' : '0'}).animate({
                top :$(".top_table").height(),
                });


                $('.bottom_close').show();
                if ($('.cartouche_bottom_inside').height() < $(window).height() ) {
            }
                $(this).addClass('active');

            }
        });

        /*----------------------------- FERMETURE BOTTOM ---------------------------------------------------*/

        $('.bottom_close').click(function(){
            flag_bottom=0;

            $('.cartouche_bottom').css({'position' : 'fixed', 'cursor' : 'context-menu'}).animate({
            top : cartouche_bottom_position
            },function(){   $('.cartouche_bottom_inside').removeClass('active');
        });
            $('.bottom_close').hide();

                    //$('.slideshow').css('position','relative');

                        $('.layout_bottom').slideDown();


        });

}

Answer 2

执行off

时，不需要函数名称

$('.cartouche_top').off('mouseenter');
$('.cartouche_bottom').off('mouseleave');

在绑定或取消绑定事件时，不要忘记元素必须属于DOM（已经完成创建）。其他情况使用此代码：

$(document).off('mouseenter','.cartouche_top');
$(document).off('mouseleave','.cartouche_bottom');

Answer 3

在调用on / off时尝试删除括号，你应该引用该函数，而不是执行函数：

$('.cartouche_top').off('mouseenter',pre_scroll_cartouche_top);
$('.cartouche_bottom').off('mouseleave',pre_scroll_cartouche_bottom);

禁用jQuery函数onClick然后启用函数

3 个答案: