Question

我有这个小小的脚本：

var $totalHeight;

$(document).ready(function() {
    $totalHeight = $('#sidebar-container').innerHeight();
    $('.sidebar-heading').each(function() {
        $totalHeight = ($totalHeight - $(this).outerHeight());
    });

    $('.sidebar-contents').each(function() { 
        if ($(this).hasClass('active')) {
            $(this).css('height',$totalHeight);
        }
    });

    $('.sidebar-heading').click(function() {
        $('.sidebar-contents').slideUp().removeClass('active').addClass('inactive')/*.css('height','').removeAttr('style')*/;
        $('.sidebar-heading').removeClass('active')/*.next().slideUp()*/;
        $(this).addClass('active').next().addClass('active').removeClass('inactive').css('height',$totalHeight).slideDown();
    });
});

我很确定这显然应该做什么。

我的问题是：首次点击('.sidebar-heading')不会将所需的$totalHeight应用于其兄弟姐妹。以下点击，确实如此。我做错了什么？

我有a draft-HTML with this code in action。我评论了上面的那些部分，以查看错误的位置，但无论如何都无法解决。

Answer 1

slideUp（）动画需要一段时间才能运行，并在完成后清理所有高度和显示样式。这将删除您在接下来的两行中所做的设置。

尝试等待，直到完成slideUp（）以完成其他操作。

   $('.sidebar-heading').click(function() {
        var self = this;
        $('.sidebar-contents').slideUp(undefined, function() {
            $('.sidebar-heading').removeClass('active')/*.next().slideUp()*/;
            $(self).addClass('active')
                .next().addClass('active').removeClass('inactive')
                .css('height',$totalHeight).slideDown();
        }).removeClass('active').addClass('inactive')
        /*.css('height','').removeAttr('style')*/;
    });

我通过使用调试器在Chrome中运行并注意到样式以一种奇怪的方式发生变化来解决这个问题。即使代码正在清除它，第一次单击第二个标题也会将高度设置在第一个标题上。这意味着某些事情可能是错误的。所以我在有人设置的jsFiddle上尝试了上面的代码。罗，看哪......

Answer 2

你也可以让fx函数自己设置高度，以避免@ LeeMeador的answer中提到的冲突。

由于 slideDown（）不接受任何css值，我们可以直接使用 animate（）函数。

$('.sidebar-heading').click(function () {
    $('.sidebar-heading').removeClass('active');
    $('.sidebar-contents').removeClass('active').addClass('inactive').stop().animate({ height: '0px' });
    $(this).addClass('active').next().addClass('active').removeClass('inactive').stop().animate({ height: $totalHeight + 'px' });
});

此外，在执行任何动画之前使用 stop（），以防止在上一个动画尚未完成时再次单击标题时出现奇怪的行为。

修改过的jsfiddle：http://jsfiddle.net/z62tr/4/

jQuery单击（function（））在第一次单击时不使用变量

2 个答案: