javascript - 下拉列表问题

Question

我写了一个包含 2 个子类别的下拉列表。当我打开第一个时，它会无缝打开，但每当我打开第二个时，在底部附近，类别不会完全展开。我的代码部分在 JsFiddle 上，如果有人可以看一下，那将不胜感激。我认为这是我的 jQuery 的问题，但它很可能是我的 HTML，所以这就是为什么我将所有相关内容都包含在我的下拉列表中。具体来说，我的问题在于 2013 类别。

这是我的 Jquery:

$(document).ready(function(){
    $('.tab_container').click(function(){
        if( $(this).parent().is('.open') ){
                $(this).closest('.tabSlot').find('.tab_container_expanded').animate({'height' : '0'},500);
                $(this).closest('.tabSlot').removeClass('open');
        }else{
            var newHeight =$(this).closest('.tabSlot').find('.tabs_expanded').height() + 'px';
            $(this).closest('.tabSlot').find('.tab_container_expanded').animate({'height' : newHeight},500);
            $(this).closest('.tabSlot').addClass('open');
        }

    });



});


$(document).ready(function(){
    $('.tab_containerb').click(function(){
        if( $(this).parent().is('.open') ){
                $(this).closest('.tabSlotb').find('.tab_container_expandedb').animate({'height' : '0'},500);
                $(this).closest('.tabSlotb').removeClass('open');
        }else{
            var newHeight =$(this).closest('.tabSlotb').find('.tabs_expandedb').height() + 'px';
            $(this).closest('.tabSlotb').find('.tab_container_expandedb').animate({'height' : newHeight},500);
            $(this).closest('.tabSlotb').addClass('open');

        }

    });



});

我觉得我需要在第二个函数中添加另一个我无法理解的语句，但这正是我的想法。

Answer 1

问题是您使用高度来控制菜单，当您的子元素的高度等于 0 时，高度计算不正确。

我更改了您的代码以使用 slideUp() 和 slideDown() 并使用 display: none; 而不是 height: 0; 成功了。

这是一个有效的 demo .