jquery - jQuery 多个滑出菜单 - 每个唯一与相同的兄弟姐妹

Question

我试图通过使用 .next() 兄弟而不是每个滑出菜单的唯一 ID 来简化我的代码。但是，当每个滑出菜单都有 .next() 兄弟（单击上一个兄弟以打开菜单容器）时，我似乎无法正确获取代码。

最终，与 6 到 8 个不同的 CSS 类相比，只维护一个 CSS 类会更容易。我确信有一种优雅的方式来编写 jQuery 以使其工作......但我就是无法得到它。任何帮助表示赞赏。下面是我的 jsfiddle（其中包括用于顶行滑出菜单的“唯一”元素方法，以及用于第二行的“兄弟姐妹”方法）和用于兄弟姐妹方法的 jQuery。

*编辑：请注意，我希望一次只提供一个菜单。顶行确实有一些同时显示的滑出式菜单，但这是特定情况。

http://jsfiddle.net/U3jHf/28/

$('.topIcon').click(function(){

    if($(this).next('.sideUITopIconContainer').is(':hidden')){  

            $(this).next('.sideUITopIconContainer').show();
            $(this).next('.sideUITopIconContainer').animate({'height':'456px'});
        $('sideUITopIconContainer').not(this).next('sideUITopIconContainer').animate({'height':'0'},function(){

                 $('sideUITopIconContainer').not(this).next('sideUITopIconContainer').hide();

        }); 
    }


    else{

        $(this).next('.sideUITopIconContainer').animate({'height':'0'}, function(){

                $(this).next('sideUITopIconContainer').hide();

        }); 
    }

});

提前感谢您的帮助。