滑动div重叠外部div？

Question

我正在尝试滑动所有其他子菜单div和fadein当前子菜单，但在向上滑动时，其他子菜单div与外部div重叠。

以下是代码：FIDDLE

     $(document).ready(function(e){
             $(".item").click(function(){                                 
                $(this).nextAll().children('div').stop().slideUp();
                $(this).prevAll().children('div').stop().slideUp();
                $(this).children('div').fadeIn(1000);
            });
        });

Answer 1

为什么不简单地执行此操作：See Fiddle

$(document).ready(function(e){
    $(".item").click(function(){                                 
        $(this).nextAll().children('div').stop().slideUp();
        $(this).prevAll().children('div').stop().slideUp();
        $(this).children('div').slideDown();
    });
});

Answer 2

添加

overflow:hidden;

到#products div。见JSFiddle

#products {
            margin: 10px;
            float: left;  
            overflow:hidden;
            border: 1px solid gray;
            height: 490px;
            box-shadow: 0px 1px 7px 2px #050505;
            width: 300px;
            background:gray;

        }