Question

最初有4个相同大小的盒子。
当用户点击任何一个盒子时，它会放大到大盒子，内容为父div的高度和宽度，并隐藏其他兄弟姐妹。
在放大div时，有内容，关闭按钮和继续按钮到下一个div。这是代码：

$(function(){
    var $currentBox = false;;
    var open = false;
    var origHeight = $('.box').innerHeight() + 'px';
    var origWidth = $('.box').innerWidth() + 'px';

    $(".clsbtn").click(function(){
        $(".box").animate({
            "height": origHeight,
            "width": origWidth
        },800);

        $(".box").show();
            $(".box-container").show();
            $(".box-content").hide();
            $(".box").on("click");
        });

        $(".box").click(function() {
            if (open) {
                $currentBox = false;
                $(this).animate({
                    "height": origHeight,
                    "width": origWidth
                },800);

                $(".box").show();
                $(".box-container").show();
                $(".box-content").hide();
                open = false;

                $(".box").bind("click");
            } else {
                $currentBox = $(this);
                var width = $('.boxes').innerWidth() + 'px',
                height = $('.boxes').innerHeight() + 'px';
                $(this).animate({
                    "height": height,
                     "width": width
                },800);

                $(this).find(".box-container").hide();
                $(this).find(".box-content").show();

                $(".box").not(this).hide();
                open = true;
                $(".box").unbind("click");
            }
        });
    });
});

的问题：

当框放大时，禁用父div点击（即＆＃34;框＆＃34;）并关闭按钮正常工作。但是当点击关闭按钮时，重新绑定功能不起作用。因此，如果div接近其原始大小，则单击无法使其再次放大。
其次我想让继续按钮到下一个放大的开放div。任何帮助将不胜感激。

由于

Answer 1

首先，我会使用.bind()和.unbind()而不是.off()和.on()。有关详细信息，请查看What's the difference between jQuery.bind() and jQuery.on()?。

此外，只要您在活动中解除绑定或使用off('click')，就无法使用bind('click')或on('click')，并希望活动恢复正常。在您的情况下，您必须重新声明事件$(".box").click(function(){...}行中的函数。

$(function(){
var $currentBox = false;;
var open = false;
var origHeight = $('.box').innerHeight() + 'px';
var origWidth = $('.box').innerWidth() + 'px';

$(".clsbtn").click(function(){
    $(".box").animate({
        "height": origHeight,
        "width": origWidth
    },800);

    $(".box").show();
        $(".box-container").show();
        $(".box-content").hide();
        $(".box").on("click");
    });

    function activate() {//change here
        if (open) {
            $currentBox = false;
            $(this).animate({
                "height": origHeight,
                "width": origWidth
            },800);

            $(".box").show();
            $(".box-container").show();
            $(".box-content").hide();
            open = false;

            $(".box").on("click",activate());//change here
        } else {
            $currentBox = $(this);
            var width = $('.boxes').innerWidth() + 'px',
            height = $('.boxes').innerHeight() + 'px';
            $(this).animate({
                "height": height,
                 "width": width
            },800);

            $(this).find(".box-container").hide();
            $(this).find(".box-content").show();

            $(".box").not(this).hide();
            open = true;
            $(".box").off("click");//change here
        }
    });

 $(".box").on("click",activate());//change here
});


});

绑定，取消绑定然后重新绑定点击功能

1 个答案: