Question

我有一个块概述，当你点击一个块时它会展开。在展开的块外部或“x”上单击时，它会调整回默认大小。

但有两个问题我不知道如何解决。

当您使用Chrome / Safari点击某个块时，z-index会更新一毫秒，但看起来并不平滑。（扩展时，Firefox上的Firefox是可以的。）

当它扩展并返回时，z-index需要高于其他块。因此，当它恢复正常时，网站看起来好多了。

因此，点击时，它应该添加z-index:2;，当它重新调整为默认大小时，z-index需要为1，因此它高于其他值（为0）但是当另一个人正在扩张时，这需要是最高的。

任何人都可以帮我吗？我宁愿使用一些JS魔法，也许是内联风格？

我也做了一个jsfiddle来表明我的意思。 https://jsfiddle.net/fourroses666/sp7vbtok/2/

HTML：

<div class="grid">    
    <div class="grid-item">
        <div class="g-inner" style="background-image:url(https://placekitten.com/350/350);">
            <div class="g-item"><img src="/some-png-img.png" height="175" width="175" /></div>
            <div class="g-more">Bla bla bla.</div>
            <div class="g-close">x</div>
        </div>  
    </div>
</div>

JS

$(".grid-item").on("click", function(){
    $(".grid-item").removeClass("active");
    $(this).addClass("active");
});
$(".g-close").on("click", function(e){
    e.stopPropagation();
    $(this).closest(".grid-item").removeClass("active");
});

CSS

.grid{width:875px; margin:20px auto;}
.grid:after {content:''; display:block; clear:both;}
.grid-item{width:175px; height:175px;}

.g-more{display:none; position:absolute; top:175px; height:175px; width:175px; transition:all 1s ease-in-out; opacity:0; padding:20px;}
.active .g-more{opacity:1; display:block;}

.grid-item{float:left; width:175px; height:175px; background:#ddd; color:#fff;}
.grid-item:before{display:block; padding:0;}
.grid-item-wide, .grid-item-wide .g-inner, .grid-item-wide .g-item{width:350px; height:175px;}

.g-inner{cursor:pointer; overflow:hidden; z-index:1; width:175px; height:175px; transition:all 1s ease-in-out; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-repeat:no-repeat; background-position:left 50%;}
.active .g-inner{width:350px; height:350px; position:relative; z-index:2; cursor:default;}
.open-left.active .g-inner{margin-left:-175px;}
.open-top.active .g-inner{margin-top:-175px;}

.g-item{width:175px; height:175px; position:relative;}

.g-close{cursor:pointer; position:absolute; right:-50px; bottom:-50px; width:50px; height:50px; line-height:50px; font-size:35px; display:none; opacity:0; text-align:center; transition:all 1s ease-in-out;}
.active .g-close{opacity:1; right:0; top:auto; bottom:0; z-index:5; display:block;}

Answer 1

尝试使用insted

 .active .g-inner {
        width:350px;
        height:350px;

    }

transform:scale和transform-origin（如果您想将枢轴x和y设置为左上角），请执行以下操作：

 .active .g-inner {
        transform: scale(2);
        transform-origin: left top;

    }

它的工作对我很好

使用z-index阻止扩展问题

1 个答案: