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。

Answer 2

主要问题隐藏在你的CSS中，而不是你溢出隐藏和高0，你应该使用display：none 因为查询中的固定高度不足以显示所有子菜单项。所以请改用$ .show（）。

删除列表问题

2 个答案: