滑动面板位于内容下方

Question

这是对上一个问题的跟进。。。我得到了Marcatetura的帮助(再次感谢！(，这是他们给我的例子：http://jsfiddle.net/rt9d5/10/embedded/result/

我决定将"li"元素更改为"div"元素，因为它更适合我的预期设计。但由于我对jquery不太熟悉，我在试图让我的jquery看起来一样时犯了一些错误。http://fiddle.jshell.net/faedince/L4L4N/(这是我的一点点代码。(

#panelOne:after {
    display: block;
    background: red;
    opacity: 0.9;
    width: 350px;
    height: 350px;
    content: "";
    -webkit-transition: -webkit-transform 500ms ease-out 0s;
    -moz-transition: -moz-transform 500ms ease-out 0s;
    -o-transition: -o-transform 500ms ease-out 0s;
    transition: transform 500ms ease-out 0s;

$( '#panelOne' ).click(function(){
    $( '#panelOne' ).removeClass( 'clicked' );
    $(this).addClass( 'clicked' );
}); 

红色封面放在白色面板下面，离页面太远了。根据这个例子，它们应该在白色面板的顶部。有人能告诉我我做错了什么吗？

Answer 1

看起来您需要将position: absolute添加到:after类中(以及top和left的定位(。您还可以稍微简化JS。与其试图为每一个可能的点击组合编写代码，不如编写一段可以应用于所有点击组合的代码。

演示Fiddle

CSS：您可以用以下内容替换所有单独的:after CSS调用。

.bigbox > div:after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    background: red;
    opacity: 0.9;
    width: 350px;
    height: 350px;
    -webkit-transition: -webkit-transform 500ms ease-out 0s;
    -moz-transition: -moz-transform 500ms ease-out 0s;
    -o-transition: -o-transform 500ms ease-out 0s;
    transition: transform 500ms ease-out 0s;
}

JS:

$('.bigbox div').on('click', function(){
    $('.bigbox div').removeClass('clicked');
    $(this).addClass('clicked');
});