Как сделать поверочного ребенка коллапс с родителем

Я учу себя об анимации с помощью простых прямоугольников, и я до сих пор удалось немного прогресса с помощью этого простого проекта:Как сделать поверочного ребенка коллапс с родителем

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; 
}

$(document).ready(function(){ 

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

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

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

     } else { 

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

    }); 
});

И это выглядит следующим образом:

Итак, что я стремился, было то, что красный прямоугольник (класс: otherrect) также должны разрушаться и исчезать, как его родительского прямоугольника. Как я могу это сделать без использования javascript и, желательно, не использовать свойство отображения. Спасибо за ваше время. P

--------------------------------- ИЗМЕНЕНИЕ ПОСЛЕ ПОЛУЧЕНИЯ ОТВЕТОВ -------- ---------------------------

Благодарим всех вас за ответы. Все они хороши в той или иной форме, но я думаю, я бы сказал, что красный прямоугольник будет видео в готовом проекте, поэтому мне нужно, чтобы он был дочерним элементом другого элемента, потому что если класс, который разрушает его применяется к нему напрямую, он влияет на то, как он выглядит. Пожалуйста, обратитесь к этому другому вопросу, чтобы увидеть GIF, что я имею в виду: slideDown() function behaving oddly

источник

2016-10-27 Paul

Примечание:. Все ваше, если() можно заменить простой '$ ('прямоугольник ') toggleClass (' закрыто') ' –

Постарайтесь не менять вопрос после того, как у вас уже есть ответы. Вы можете сделать ответы, которые разрешают исходный вопрос недействительным. – Tibrogargan

Ок, извините, я не знал, что я задам новый вопрос – Paul

Измените класс диапазона или добавить так:

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

источник

2016-10-27 20:30:18 mJehanno

второстепенная проблема. Если это будет сделано, вам нужно быть осторожным в изменении таблицы стилей, поскольку ваш дисплей теперь зависит от порядка, определяемого стилями. – Tibrogargan

Да, я тоже должен был об этом говорить, спасибо за улучшение! – mJehanno

overflow:hidden; Просто добавьте в .rect { классе и ваше благе. :)

источник

2016-10-27 20:36:38

Это действительно не рушится и не исчезает «другое», как у его родителей – Tibrogargan

Переместите настройки анимации в 3-й класс («анимировать»), дайте оба элемента класса span и добавьте «закрытый» класс к любому элементу с классом «anim» в вашем onclick.

Примечание: При этом используется такое же количество JavaScript в вашем вопросе, который я предполагаю, это нормально (но технически не отвечает «без использования JavaScript» требования)

(ТНХ Марку B для OnClick)

EDIT: Добавлено видео. Анимация немного сентиментальный, жаль :(

$(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>

источник

2016-10-27 20:43:16 Tibrogargan

Как сделать поверочного ребенка коллапс с родителем

ответ

Смежные вопросы