2

这是我的情况。我有一个像这样的滑动 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>项目时，它会跳转到第二行，问题是这段代码不计算第二行的高度。

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

谢谢你。

4

2 回答 2

0

您可以使用该scrollHeight属性：

$("ul")[0].scrollHeight

对于您的具体情况 -

$content.find('ul')[0].scrollHeight
于 2012-07-20T12:12:20.100 回答
0

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

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

然后你可以添加边距。

于 2012-07-20T12:21:47.047 回答