javascript - 位于内容下方的滑动面板？

Question

这是对上一个问题的跟进......我得到了 Marcatectura 的帮助(再次感谢!)，这是他们给我的例子: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');
});