具有不同高度的下拉卷展栏：将高度设置为自动中断下拉列表

Question

Right now I have the following fiddle:

body, * {
    margin: 0;
    padding: 0;
}
.wrapper {
    border: 1px solid black;
}

li {
  height: 100px;
}
#two {
    height: 0em;
    overflow: hidden;
    transition-property: height;
    transition: all 1s ease-in-out;
}
.wrapper:hover #two {
    height: 4em;
}

https://jsfiddle.net/ehu2cxe2/

This seems to work, however, in my actual project I set the dropdown menu height by however tall the children are, they all have different heights so that's why I can't give them all a fixed height of, say, 4em.

I tried to change this to height:auto on hover, but this makes the whole thing break. What am I doing wrong?

Answer 1

If you know about how tall the children will be, you can use max-height instead.

 body, * { margin: 0; padding: 0; } .wrapper { border: 1px solid black; } #two { max-height: 0em; overflow: hidden; transition-property: height; transition: all 1s ease-in-out; } .wrapper:hover #two { max-height: 4em; } 

 <div class="wrapper"> <div id="one">(content)</div> <div id="two"> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> </div> </div> 

Or using js/jquery, you can get the rendered list height and apply that as the height to transition

 var h = $('#two ul').outerHeight(), $two = $('#two'), $wrapper = $('.wrapper'); $wrapper.hover(function() { $two.css('height',h); }, function() { $two.css('height','0'); }); 

 body, * { margin: 0; padding: 0; } .wrapper { border: 1px solid black; } #two { height: 0em; overflow: hidden; transition-property: height; transition: all 1s ease-in-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div id="one">(content)</div> <div id="two"> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> </div> </div> 

You can also use $.slideToggle() but I prefer keeping the animation/transition in CSS.

 var $twoUl = $('#two ul'), $wrapper = $('.wrapper'); $wrapper.hover(function() { $twoUl.stop().slideToggle(); }); 

 body, * { margin: 0; padding: 0; } .wrapper { border: 1px solid black; } #two { overflow: hidden; } #two ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div id="one">(content)</div> <div id="two"> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> </div> </div> 

Answer 2

Using percentages for .wrapper with max-height: 100% , you can skip the javascript and keep it all css . This way you can set your list elements to as many different heights as you need.

  body, * { margin: 0; padding: 0; } .wrapper { border: 1px solid black; } #two { max-height: 0em; overflow: hidden; transition-property: height; transition: all 1s ease-in-out; } .wrapper:hover #two { max-height: 100%; } li:nth-child(1) { height: 2.5em; line-height: 2.5em; background-color: lightgrey; } li:nth-child(2) { height: 1.5em; line-height: 1.5em; background-color: grey; } li:nth-child(3) { height: 3.1em; line-height: 3.1em; background-color: dimgrey; } 

 <div class="wrapper"> <div id="one">(content)</div> <div id="two"> <ul> <li>Menu1</li> <li>Menu2</li> <li>Menu3</li> </ul> </div> </div>