0

Twitterのブートストラップに触発された次のコードがあります。Blackberry Curve 8200 以外のすべてで完璧に動作します。

基本的にはナビの開閉です。

イベントがトリガーされ、状態が正しく取得されていますが、css を調整しても何も起こりません :( 代わりにクラスを追加および削除しようとしましたが、同じ問題です。

スタイル属性を手動で追加すると、折りたたまれた要素は正しく表示されます。

$('[data-toggle="collapse"]').bind('click', collapse);

function collapse (e) {
    var $this = $(this);
    var target = $this.data('target');
    var state = $this.data('state');
    if ( ! state ) state = 'closed'; 

    if ( state === 'closed' ) {
        $(target).css('height', 'auto');
        $this.data('state', 'open');
    } else {
        $(target).css('height', '0');
        $this.data('state', 'closed');
    }
    return false;
}

基本的には次の行のようです

$(target).css('height', 'auto');

何もしていないだけです。ターゲット変数が正しいにもかかわらず。

私のhtmlは基本的に次のようになります

<style>
    .nav { height: 0; }
</style>
<div data-toggle="collapse" data-target=".nav">...</div>
<div class="nav">...</div>

-アップデート-

私はゼプトを使用していましたが、jQueryで試してみました...同じ問題。

4

1 に答える 1

1

これは OS5 または OS6 ですか? OS5ならDOM再レンダリング対応のブラウザにいろいろと不具合があります。height: autoそれらの1つです。私が使用した解決策は、ページの読み込み時にそれらを表示し、data-*属性を介して元の高さを測定してキャッシュし、すべて折りたたむことです。autoそうすれば、正確なピクセル寸法を示す代わりに、それらを表示するときが来ます。

于 2012-06-11T14:28:54.817 に答える