滑动面板位于内容下方？

Question

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

我决定将“li”元素更改为“div”元素，因为它更适合我的预期设计。但是由于我对 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。与其尝试为每一种可能的点击组合编写代码，不如编写一段代码适用于所有点击组合。

Demo 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');
});