Анимация jQuery SlideToggle изменяется путем добавления высоты (%)

121
12

В приведенном ниже коде выполняется меню jQuery SlideToggle. Как только вы нажмете на <container> <panel> будет прокручена. Пока все хорошо.

Однако теперь я хочу назначить относительную height: 25%; на <div> внутри <panel>.
(см. комментарии в моем CSS ниже)
Как только я это сделаю, анимация SlideToggle изменится и прокручивается в <panel> разному.

Как добавить относительную height: 25%; поэтому анимация остается такой же, как без относительной высоты?

Вы также можете найти мой код здесь

$(document).ready(function () {
$(".container").on('click', function () {
$(this).next('.panel').slideToggle(500);
});
});
html { 
height: 100%;
}

body {
height: 100%;
}

.container {
height: 30%;
width: 30%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}

.panel {
height: 30%;
width: 70%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}

.panel div {
height: 25%; /* Why does the animation change by adding this height? */
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">Menu</div>

<div class="panel">
<div> 1.0 Menu </div>
<div> 2.0 Menu </div>
<div> 3.0 Menu </div>
<div> 4.0 Menu </div>
</div>

спросил(а) 2021-01-19T18:16:48+03:00 9 месяцев назад
1
Решение
79

Здесь вы найдете решение https://jsfiddle.net/p6dqLLj6/68/

$(document).ready(function () {
$(".container").on('click', function () {
$(this).next('.panel').slideToggle(500);
}).css({
height: $('.panel').height()
});

$(window).resize( function(){
$(".container").css({
height: $('.panel').height()
});
});
});
html { 
height: 100%;
}

body {
height: 100%;
}

.container {
width: 30%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}

.panel {
width: 70%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 0px;
background-color: blue;
}

.panel div {
padding: 5px;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">Menu</div>

<div class="panel">
<div> 1.0 Menu </div>
<div> 2.0 Menu </div>
<div> 3.0 Menu </div>
<div> 4.0 Menu </div>
</div>

Я вычисляю высоту .container div, основанную на высоте .panel div, используя jQuery, а также добавленную функцию изменения размера .container div в окне изменения размера.

Надеюсь, что это поможет вам.

ответил(а) 2021-01-19T18:16:48+03:00 9 месяцев назад
47

Я предлагаю не использовать значение%, проблема в том, что, когда панель уменьшается, высота по-прежнему занимает 25%, поэтому вы видите, что эффект, если вы ставите статическую высоту, работает правильно.

$(document).ready(function () {
$(".container").on('click', function () {
$(this).next('.panel').slideToggle(500);
});
});
html { 
height: 100%;
}

body {
height: 100%;
}

.container {
height: 115px;
width: 30%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}

.panel {
height: 115px;
width: 70%;
float: left;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}

.panel div {/* Why does the animation change by adding this height? */
/*height:25%;*/
height: 28.4px;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">Menu</div>

<div class="panel">
<div> 1.0 Menu </div>
<div> 2.0 Menu </div>
<div> 3.0 Menu </div>
<div> 4.0 Menu </div>
</div>

ответил(а) 2021-01-19T18:16:48+03:00 9 месяцев назад
47

Я предлагаю использовать display flex, мы можем добавить несколько столбцов, и вы получите одинаковую высоту для каждого столбца

$(document).ready(function () {
$(".container").on('click', function () {
console.log(this);

$( "div" ).find('.panel').slideToggle(500);
});
});
html { 
height: 100%;
}

body {
height: 100%;
}
.main{display:flex;width:100%}
.container {
flex:1;

box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}

.flex-4 {
flex:4;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.panel{
display:flex;
width:100%;
flex-direction: column;
}
.panel div {
flex:1;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">

<div class="container">Menu</div>
<div class="flex-4">
<div class="panel">
<div> 1.0 Menu </div>
<div> 2.0 Menu </div>
<div> 3.0 Menu </div>
<div> 4.0 Menu </div>
</div>
</div>
</div>

или проверить код здесь здесь

ответил(а) 2021-01-19T18:16:48+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема