Question

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

我决定改变＆＃39; li＆＃39;元素到＆＃39; div＆＃39;元素，因为它更适合我的设计。但是，由于我并不精通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');
});

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

1 个答案: