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>项时，它会跳到第二行，问题是此代码不计算第二行的高度。

任何想法如何解决这个问题？

谢谢。

Answer 1

您可以使用scrollHeight属性：

$("ul")[0].scrollHeight

针对您的具体情况 -

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

Answer 2

您可以使用以下内容计算内容中所有li的高度：

var totalLiHeight = 0;
$el.find('ul li').each(function() {
    var currentLiHeight = $(this).height();
    totalLiHeight += currentLiHeight;
});

然后你可以添加边距。

使用Javascript计算<ul>高度</ul>

2 个答案: