-1

高さの調整を追跡できるアコーディオンを作成する必要がありました。ほとんどの場合、アコーディオンのコンテナーはその高さを自動的に調整しますが、私のアコーディオンは相対位置の div 内にある絶対位置の div にあり、背景を移動するためにアコーディオンと共に相対位置の div の高さを調整する必要がありました。周りの画像。他の誰かが似たようなものを必要とする場合に備えて、ここに私が思いついた結果があります (ahren と dmi3y の助けを借りて):

http://jsfiddle.net/MSatE/48/

html:

<div id="accordion">
    <h3>Sample Header 1</h3>
    <div>
        <p>
            Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem
        </p>
    </div>
    <h3>Sample Header 2</h3>
    <div>
        <p>
            Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem Sample<br />
            More Sample Text<br />
            Yet More Sample Text<br />
            I wish I could come up with something more clever<br />
            This should be enough for you to see the problem
        </p>
    </div>
</div>

CSS:

#accordion {
    width: 600px;
    border: 1px solid #C0C0C0;
    border-bottom: none;
    box-shadow: 0 0 5px #C0C0C0;
    -webkit-box-shadow: 0 0 5px #C0C0C0;
    margin: 30px auto;
    background: #FFF;
}

#accordion h3 {
    border-bottom: 1px solid #C0C0C0;
    padding: 10px;
}

#accordion div {
    display: none;
    padding: 20px;
    border-bottom: 1px solid #C0C0C0;
    background: #F4F4F4;
}

#accordion p {
    padding: 0;
    margin: 0;
}

#accordion h3:hover {
    cursor: pointer;
}

.forMeasure {
    position: absolute;
    visibility: hidden;
    display: block!important;
}

JavaScript/jQuery:

$('#accordion h3').click(function(){
    var adjustment = 0;
    var div = $(this).next('div');

    if(div.css('display') == 'none')
    {
        adjustment += div.addClass('forMeasure').outerHeight();
        div.removeClass('forMeasure');
        div.slideDown();
        div.siblings('div').each(function(){
            if($(this).css('display') == 'block')
            {
                adjustment -= $(this).outerHeight();
                $(this).slideUp();
            }
        });
    }
    else
    {
        adjustment -= div.outerHeight();
        div.slideUp();
    }
});
4

3 に答える 3

2

私はあなたのアコーディオンを単純化しました...

http://jsfiddle.net/MSatE/3/

$('#accordion h3').click(function(){
    $(this).next().slideDown().siblings('div').slideUp();
});​

私が行った唯一のCSSの変更：

#accordion div {
    position: relative; /* <-- changed to relative */
    display:none; /* <-- changed from visibility:hidden; to display:none; */
    padding: 20px;
    border-bottom: 1px solid #C0C0C0;
    background: #F4F4F4;
}

編集

要求に応じて...アニメーションが始まる前にアコーディオンの新しい高さを取得する方法...
http：//jsfiddle.net/MSatE/6/

$('#accordion h3').click(function(){
    /* Extra code to get the height of the new accordion once this div has been shown... */
    var $t = $(this);
    $t.siblings('div').filter(':visible').addClass('oldVisible');
    $t.next().show().siblings('div').hide();
    var height = $('#accordion').outerHeight();
    $t.next().hide().siblings('.oldVisible').show().removeClass('oldVisible');

    console.log(height);
    $t.next().slideDown().siblings('div').slideUp();
});​
于 2012-11-27T21:07:15.073 に答える
0

ここで、あなたが求めていると思うものを得るために、jquery を少し変更しました。基本的に、コンテンツ div の高さがその中のすべてのコンテンツをカバーするようになりました。http://jsfiddle.net/MSatE/9/

次の行を 100% に調整するだけで、非常に単純でした。

var div_height = $(this).height();
$(this).css('height', '100%');

これがあなたが探していたものであることを願っています! よろしく、 -エピック-

于 2012-11-27T23:02:35.193 に答える
0

jQueryUI アコーディオン機能を調べましたか? そうでない場合は、それらの例を見て、それらをコピーして Web サイトのドキュメントに貼り付け、10 分間試してみてください。あなたはあなたがしたことをうれしく思います。

于 2012-11-27T20:54:01.633 に答える