3

我有这个小脚本：

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

我很确定它应该做什么是显而易见的。

我的问题是：第一次单击 a('.sidebar-heading')不会将期望$totalHeight应用于其兄弟。以下点击，确实如此。我究竟做错了什么？

我有一个包含此代码的草稿 HTML。我注释掉了上面的那些部分以检查错误在哪里，但无论如何都无法弄清楚。

4

2 回答 2

3

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上尝试了上面的代码。瞧……

于 2013-01-18T18:22:28.933 回答
2

您还可以让 fx 函数自行设置高度，以避免@LeeMeador 的答案中提到的冲突。

由于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/

于 2013-01-18T20:09:51.867 回答