jQuery SlideToggle的动画通过添加高度(％)进行更改 [英] Animation of jQuery SlideToggle changes by adding a height (%)

问题描述

下面的代码运行 jQuery SlideToggle 菜单.单击<container>后，将滚动出<panel>.到目前为止，一切正常.

The code below runs a jQuery SlideToggle menu. Once you click on the <container> the <panel> is scrolled out. This all works fine so far.

但是，现在我想为<panel>内的<div>分配相对 height: 25%;.
(请参见下面的CSS注释)
完成此操作后，SlideToggle的动画会进行更改，并在<panel>不同.

However, now I want to assign a relative height: 25%; to the <div> inside the <panel>.
(see comments in my CSS below)
Once I do this the animation of the SlideToggle changes and scrolls in the <panel> differently.

如何添加相对值height: 25%;，使动画保持与相同，而没有相对高度?

How can I add a relative height: 25%; so the animation remains the same as without the relative height?

您还可以在此处

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

推荐答案

我建议使用display flex，我们可以添加多列，并且每列的高度相同

I suggest to use display flex we can add multi column and you get the same height for each column

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

或从此处检查代码此处

这篇关于jQuery SlideToggle的动画通过添加高度(％)进行更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！