如何使用 parent 使 child 跨度崩溃

Question

我正在使用简单的矩形自学动画，到目前为止，我在这个简单的项目上取得了一些进展：

html:

<!DOCTYPE html>
<html>
    <head>
        <title>test slider</title>

        <link rel="stylesheet" type="text/css" href="styles.css">    
        <script type="text/javascript" src="jquery.js"></script>    
        <script type="text/javascript" src="script.js"></script>
    </head>

    <body>
        <span class="rect">
            <span class="otherrect"></span>
        </span>    
        <p id="button"> click here </p>
    </body>
</html>

css

.rect{
    float: left;
    height: 400px;
    width: 550px;
    background-color: blue;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;   
}

.otherrect {
    float: left;
    height: 200px;
    width: 250px;
    background-color: red;
}

.closed {
    height: 0;
    background-color: white; 
}

#button {
    float: right;
    margin-top: 200px;
    margin-right: 500px;
}

js

$(document).ready(function(){

    $("#button").click(function(){

        if ($( ".rect" ).hasClass( "closed" )){

            $(".rect").removeClass("closed");

        } else {

        $(".rect").addClass("closed");  
    }

    });
});

看起来像这样：

所以，我的目标是红色矩形 (class: otherrect) 也应该像它的 parent 矩形一样折叠和淡化。如何在不使用 javascript 并且最好不必使用显示属性的情况下执行此操作。谢谢你的时间。 P

--------------------------------收到答案后编辑-------- --------------------------

谢谢大家的回答。这些在某种程度上都很好，但我想我应该提到红色矩形将成为完成项目中的视频，所以我需要它是另一个元素的 child 因为如果class collapses it 直接应用于它，它会影响它的外观。请参考这个其他问题以查看我的意思的 gif：

Answer 1

更改跨度 class 或像这样添加一个：

    <span class="rect">
        <span class="otherrect rect"></span>
    </span>

Answer 2

只需在 .rect { class 中添加 overflow:hidden; 即可。 :)

Answer 3

将动画设置移至第 3 个 class ("anim")，同时提供 class 的 span 元素并添加 "closed" class 到您的 onclick 中带有 "anim" class 的任何元素。

注意：这使用与您的问题相同数量的 JavaScript，我认为没问题（但技术上不符合 "without using javascript" 要求）

（感谢 Mark B 的点击）

编辑：添加了一个视频。动画有点矫揉造作，抱歉:(

$(function(){
    $("#button").click(function() {
        $('.anim').toggleClass('closed')
    });
});

.rect{
    float: left;
    height: 400px;
    width: 550px;
    background-color: blue;
}

.anim {
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.otherrect {
    float: left;
    height: 200px;
    width: 250px;
    background-color: red;
}

.closed {
    height: 0;
    background-color: white;
}

video {all:inherit}

#button {
    float: right;
    margin-top: 200px;
    margin-right: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <span class="rect anim">
        <span class="otherrect anim"><video class="anim" controls>
  <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
  <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
  <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
  <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video></span>
    </span>
    <p id="button"> click here </p>
</body>

如何使用 parent 使 child 跨度崩溃

How to make child span collapse with parent

html

javascript

css

transition

parent-child