Question

我尝试做以下事项：
点击重新调整与divs内容高度匹配的divs高度（内容通过“overflow：hidden”隐藏） div的内容是响应的（意味着窗口宽度也会改变div的内容高度变化。

单击更改div（.video）高度以匹配div内容（.video-container）高度：

$('.video').click(function()
{
    $(this).animate(
    {
        height:$('.video .video-container').height()
    });
});

这很好用，但如果我调整窗口的大小，.video-container的高度会发生变化，我需要重新调整大小.video更多。

这就是我已经拥有的一切：

视频：

<div class="video">
    <div class="video-container">
        <div class="flowplayer">
            <video preload='none'>
                <source type="video/mp4" src="video.mp4"/>
            </video>
        </div>
    </div>
</div>

的javascript：

$(document).ready(function()
{
    $('.video').click(function()
    { 
        $(this).animate(
        {
            height:$('.video .video-container').height()
        }); 
    });

已删除链接 - （已找到解决方案，一切正常）

如果你点击它延伸的第一个黑色容器，之后你会注意到你重新调整浏览器的大小，视频会变小，但容器会保持很大。我希望这能澄清问题。

Answer 1

根据您发布的新信息，我想出了这个：

新小提琴示例：http://jsfiddle.net/YSqAX/4/

我使用了resize插件，因为本机jquery resize无法检测元素何时调整大小。

Ben Alman jquery resize plugin

//animate height
$.fn.animateHeight = function (container) {
    var thisHeight = $(container).map(function (i, e) {
        return $(e).height();
    }).get();

    return this.animate({
        height: thisHeight
    });
};

$(".video").on("click", function () {
    $(this).animateHeight(".video-container");
});

$(".video").resize(function (e) {
    $(this).animateHeight(".video-container");
});

如何设置与响应内容匹配的div高度？

1 个答案: