Question

看起来它每次点击时都会不断添加新的newHeight和newDistance，我试图用顶部的全局变量保存原始高度并使用数据来做到这一点但我得到了奇怪的结果，基本上我应该是能够将newDistance和newHeight重置为之前的原始值，以便通过点击运行该批次，但它没有，并且每次我点击我的布局时都会得到新的添加值：

talents = $(".talenti");
filter = $(".filtra");

genHeight = $("#container").data($("#container").height());

filter.click(function(e) {
    e.preventDefault();
    if (talents.hasClass("opened")) {
        $(".nasco").slideToggle();
        $("#wrapNav").slideToggle("10", "linear");
        talents.removeClass('opened');
        filter.addClass('opened');
        $("#container").css("height", genHeight);
    } else  {
        filter.addClass('opened');
    };
    if (filter.hasClass("opened")) {
        $("#wrapNav").slideToggle("10", "linear", function(){
            $("#sliding-navigation").slideToggle();
            var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
            var newDistance = newHeight - $("#container").height() + 22;
            $("#container").animate({height: newHeight}, 50,function(){ 
                $(".box").animate({top: newDistance}); 
            });
        });
    } 
});

talents.click(function(e) {
    e.preventDefault();
    if (filter.hasClass("opened")) {
        $("#sliding-navigation").slideToggle();
        $("#wrapNav").slideToggle("10", "linear");
        filter.removeClass('opened');
        talents.addClass('opened');
        $("#container").css("height", genHeight);
    } else  {
        talens.addClass('opened');
    };  
    if (talents.hasClass("opened")) {
        $("#wrapNav").slideToggle("10", "linear", function(){
            $(".nasco").slideToggle();
            var newHeight = $("#container").height() + $("#wrapNav").outerHeight(true);
            var newDistance = newHeight - $("#container").height() + 156;
            $("#container").animate({height: newHeight}, 50,function(){ 
                $(".box").animate({top: newDistance}); 
            });
        });
    } 
});

任何？

Answer 1

如何使用容器元素的数据集合而不是全局变量，即在顶部记录高度

$("#container").data('height', $("#container").height());

然后使用

$("#container").data('height');

即。重置高度

$("#container").css({height: $("#container").data('height') });

我对全局变量如何工作感到有点怀疑。值得一试

Answer 2

因此，根据我可以在大约20分钟前从您的测试网站下载的代码，我设法使用以下代码：

$(document).ready(function(){

    // placeholder to contain the original height...
    var original_height = 0;

    talents = $(".talenti");
    filter = $(".filtra");

    filter.click(function(e){
        e.preventDefault();

        if (filter.hasClass('opened')){

            filter.removeClass('opened');

            // toggle the wrapping, just with a zero top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){
                $("#sliding-navigation").hide();
                $(".box").animate({top: '0px'});
            });

            // reset to the original height...
            $("#container").height(original_height);

        }
        else {

            // get the original height if it's not already set...
            if (original_height == 0)
                original_height = $("#container").height();

            filter.addClass('opened');
            if (talents.hasClass("opened"))
            {
                $(".nasco").hide();
                $("#wrapNav").slideToggle();
                talents.removeClass('opened');
            }

            // toggle the wrapping with a height of the nav as top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){
                $("#sliding-navigation").slideToggle(true, function(){

                    // need the height of the nav before we know how far to move the boxes...
                    var newHeight = $("#wrapNav").outerHeight(true);
                    $(".box").animate({top: newHeight});

                    // set the container's new height, much like you had...
                    $("#container").height(original_height + newHeight);

                });
            });
        }
    });


    talents.click(function(e) {
        e.preventDefault();

        if (talents.hasClass('opened')) {

            talents.removeClass('opened');

            // toggle the wrapping, just with a zero top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){
                $(".nasco").hide();
                $(".box").animate({top: '0px'});
            });

            // reset to the original height...
            $("#container").height(original_height);

        }
        else {

            // get the original height if it's not already set...
            if (original_height == 0)
                original_height = $("#container").height();

            talents.addClass('opened');         
            if (filter.hasClass("opened"))
            {
                $("#sliding-navigation").hide();
                $("#wrapNav").slideToggle();
                filter.removeClass('opened');
            }

            // toggle the wrapping with a height of the nav as top coordinate...
            $("#wrapNav").slideToggle("10", "linear", function(){

                // need the height of the nav before we know how far to move the boxes...
                $(".nasco").slideToggle(true, function(){

                    var newHeight = $("#wrapNav").outerHeight(true);
                    $(".box").animate({top: newHeight});

                    // set the container's new height, much like you had...
                    $("#container").height(original_height + newHeight);

                });
            });
        }
    });
});

添加思考的几点：

我简化了多个if语句，以便于理解和处理
如果您连续多次点击hide()，我使用FILTER来避免混乱的动画问题
我只调整了方框的top坐标以实现此目的
我希望将盒子放在一个更通用的容器中，以便更容易动画和管理，但我知道wordpress并不总是给你最大的工作空间，所以这应该让你顺利！

它可能不完全是你在动画中寻找的东西，但它是你所拥有的代码的一个工作示例，应该让你90％的方式...希望这有帮助！：）

如何重置为原始值？

2 个答案: