javascript - 具有不同高度的下拉卷展栏 : setting height to auto breaks the rolldown

原文 标签 javascript jquery html css

现在我有以下 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/

这似乎有效,但是,在我的实际元素中,我将下拉菜单的高度设置为无论 child 有多高,他们都有不同的高度,所以这就是为什么我不能给他们一个固定的高度,比如 4em。

我试图将其更改为 height:auto在悬停时,但这会使整个事情中断。我究竟做错了什么?

最佳答案

如果您知道 child 的高度,可以使用 max-height反而。

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>


或者使用 js/jquery,您可以获得渲染列表的高度并将其作为高度应用到 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>


您也可以使用 $.slideToggle()但我更喜欢在 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>

关于javascript - 具有不同高度的下拉卷展栏 : setting height to auto breaks the rolldown,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44863679/

相关文章:

javascript - 在Javascript对象中使用变量

javascript - 从嵌套的Backbone.js模型访问属性的问题

javascript - 在JavaScript中重现Websocket错误代码1006

javascript - 使用.position()在jquery中查找元素的位置不起作用

javascript - 仅使用CSS或Javascript,如何在移动设备中查看模式框时停止后台滚动?

html - 将javascript拖放为html并自动格式化所有<code>和/或<pre> block

javascript - 使用选择表单选项过滤内容

javascript - 将 html ID 添加到 rails 选择选项

javascript - 将 jquery ajax POST 请求更改为 fetch api POST

javascript - 通过javascript检索CSS属性值