掉落列表问题

Drop List problems

本文关键字：问题 列表      更新时间：2023-09-26

我写了一个包含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');
        }
    });

});

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

问题是，你正在使用高度来控制菜单和高度不正确计算时，你有子元素的高度等于0

我把你的代码改为使用slideUp()和slideDown()，使用display: none;代替height: 0;，它工作了。

主要问题隐藏在你的css，你应该使用display:none而不是溢出hidden和height为0因为查询中的固定高度不足以显示所有子菜单项。所以使用$.show()代替。

相关文章：