javascript - 使用 Javascript 计算 高度

Question

这是我的情况。我有一个像这样的滑动 jquery 菜单:http://tympanus.net/codrops/2011/07/03/sliding-background-image-menu .

菜单代码为:

<div id="sbi_container" class="sbi_container">
        <div class="sbi_panel" data-bg="images/1.jpg">
            <a href="#" class="sbi_label">About</a>
            <div class="sbi_content">
                <ul>
                    <li><a href="#">Subitem</a></li>
                    <li><a href="#">Subitem</a></li>
                    <li><a href="#">Subitem</a></li>
                </ul>
            </div>
        </div>
        <div class="sbi_panel" data-bg="images/2.jpg">
            ...
        </div>

CSS:

.sbi_content{
    position:absolute;
    border-top:2px solid #000;
    bottom:90px;
    left:0px;
    width:100%;
    background:transparent url(../images/pattern.png) repeat top left;
    display:none;
    overflow:hidden;
}
.sbi_content ul{
    padding:10px;
}
.sbi_content ul a{
    display:block;
    color:#f0f0f0;
    font-size:16px;
    padding:4px 6px 4px 14px;
    background:transparent url(../images/triangle.png) no-repeat 3px 50%;
    opacity:0.9;
}
.sbi_content ul a:hover{
    background-color:#000;
    color:#fff;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
}

这是我遇到问题的一段 JavaScript:

    $content.each(function(i) {
            var $el = $(this);
// save each content's height (where the menu items are)
// and hide them by setting the height to 0px
            var num = $el.find('ul li').size();

            $el.data( 'height', num * 35 + 10 ).css( 'height', '0px' ).show();
                    });

我需要计算这些 <ul> 的高度.我现在正在计算有多少 <li>项目，然后将其乘以一个人的高度 (35) 并添加 10px 的边距..

一切都会好起来的，但是当有一个很长的<li> item，它跳到第二行，问题是这段代码不计算第二行的高度。

有什么办法可以解决这个问题吗？

谢谢。

Answer 1

您可以使用 scrollHeight 属性:

$("ul")[0].scrollHeight

针对您的具体情况 -

$content.find('ul')[0].scrollHeight