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>アイテムがある場合は2行目にジャンプし、このコードでは2行目の高さがカウントされないという問題があります。

この問題をどのように解決できますか？

ありがとうございました。

4

2 に答える 2

0

scrollHeight次のプロパティを使用できます。

$("ul")[0].scrollHeight

あなたの特定の場合のために-

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

liこれを使用して、コンテンツ内のすべてのの高さを数えることができます。

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

次に、それにマージンを追加できます。

于 2012-07-20T12:21:47.047 に答える