show/hide 多个 div 标签同时更改剩余 div 标签的大小

Question

我有四个 200px*200px div 标签，当我点击一个标签时，我想将我点击的标签更改为 800px*800px 并隐藏其他三个 div 标签。我希望能够对它们中的每一个都执行此操作，所以说当我单击一个时它会展开，然后当我再次单击它时它又会缩回然后我可以单击另一个。

CSS:

#tile1-show, #tile2-show, #tile3-show, #tile4-show{
    width: 20%;
    padding-top: 20%;
    margin: 0% 0% 2.5% 2.5%;
    height: auto;
    float: left;
    background-color: red;
    border-radius: 20px;
    border: 2px solid #707070;
}

#tile1-hide, #tile2-hide, #tile3-hide, #tile4-hide {
    width: 40%;
    height: 40%;
    float: left;    
    display: none;
    border-radius: 20px;
    border: 2px solid #707070;
}

Answer 1

您当前的代码太复杂，无法实现您想要的。下面是一个简单的方法，（查看 fiddle http://jsfiddle.net/xdt0uaxe/1/）

在 HTML、

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>
<div class="tiles"></div>

在CSS,

.tiles{
    width: 200px;
    height: 200px;
    padding-top: 20%;
    margin: 0% 0% 2.5% 2.5%;
    height: auto;
    float: left;
    background-color: red;
    border-radius: 20px;
    border: 2px solid #707070;
}
.tiles.active{
    width: 800px;
    height: 800px;
    display: block !important;
}
.tiles.inactive{
    display:none;
}

并在 jQuery、

$(document).ready(function(){
    $(".tiles").click(function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
            $(".tiles.inactive").removeClass("inactive");
        }
        else{
            $(".tiles").addClass("inactive");   
            $(this).removeClass("inactive").addClass("active");
        }
    });
});

show/hide 多个 div 标签同时更改剩余 div 标签的大小

show/hide multiple div tags at once and change the size of the remaining div tag

html

css

onclick

show

hide