0

我和其他人一样在这里遇到问题：在 jQuery 中，当元素可见时，我无法获得元素的高度，但在隐藏时。我有这个 HTML 代码：

<div id="filtering-filter-holder">
    <div id="filtering-filter-holder-inner"></div>
</div>

它的基本CSS：

#filtering-filter-holder {
    display: none;
    position: absolute;
    width: 420px;
    min-height: 100px;
    padding: 5px 5px 5px 5px;
    background-color: #ffffff;
    border: 1px solid #164372;
}

最后是 document.ready() 中的 JS：

$('div.filtering-filter-headline').mouseenter(function() {
    var el = $(this).parent().find('div.filtering-filter-content');

    if ($('div#filtering-filter-holder').is(':visible')) {
        $('div#filtering-filter-holder-inner').stop(true, true).fadeOut(300, function() {
            $('div#filtering-filter-holder-inner').html($(el).html());
            var height = $('div#filtering-filter-holder-inner').height();
            $('div#filtering-filter-holder').stop(true, true).animate({ height:height }, 300);
        }).fadeIn(300);
        $('div#filtering-filter-holder').stop(true, true).animate({ left: $(this).offset().left }, 300);
    }
    else {
        $('div#filtering-filter-holder-inner').html($(el).html());
        $('div#filtering-filter-holder').css({ top: ($(this).offset().top + 22), left: $(this).offset().left });
        $('div#filtering-filter-holder').fadeIn(300);
        $('div#filtering-filter-holder-inner').fadeOut(1, function() {
            var height = $('div#filtering-filter-holder-inner').height(); // not working without hidding this element
            $('div#filtering-filter-holder').height(height);
        }).fadeIn(1);
    }
});

如果filtering-filter-holder可见，则添加一些动画。如果没有，则需要初始设置 - 但是，如果元素为 display: block，我无法获得过滤过滤器支架内部的高度，我必须先隐藏它。我想知道，我做错了什么——正如谷歌所说，开发人员遇到了相反的问题。

我想知道为什么我必须先隐藏元素。

我可以同时使用 jQuery 和 jQueryUI，因为它们都加载在页面上：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

示例在：http: //jsfiddle.net/tomis/jDWbK/

4

0 回答 0