0

トップパネルのドロップダウンを使用しています。これに似たものhttp://www.yootheme.com/tools/extensions/yootoppanel

当初はmootoolsにありました。しかし、私はIE8で問題を抱えていました。そこで、Jqueryに変更しようと思いました。スライドダウンとスライドアップの機能を作成しました。しかし、スライド効果を追加することはできません。コーディングに関しては、ボタンのクリックイベントで関数を呼び出しました。下にスライドすると高さや位置などが追加され、上にスライドすると削除されます。

function toggle(articleheight,height) {
        if(height < 0){
        slideIn(articleheight);
        }
    else{
        slideOut(articleheight);
        }
     }
function slideIn(articleheight){
    jQuery(".panel").css("margin-top",0);
    jQuery(".panel-wrapper").css("height",articleheight);

}
function slideOut(articleheight){
    jQuery(".panel").css("margin-top",-articleheight);
    jQuery(".panel-wrapper").css("height",0);

}

私のHTMLコード

<div id="toppanel" class="toppanel">

        <div class="panel-container">
            <div class="panel-wrapper">
                <div class="panel">
                    <div class="content">
                        MY CONTENT
                    </div>
                </div>
            </div>

            <div class="trigger" style="<?php echo $css_left_position ?>">
                <div class="trigger-l"></div>
                <div class="trigger-m">Panel</div>
                <div class="trigger-r"></div>
            </div>
        </div>

    </div>

助けてください

4

2 に答える 2

1

jQueryのスライド効果の使用を検討します

例は API リファレンスに含まれています

http://api.jquery.com/category/effects/sliding/

簡単な例を追加しました。高さの変数を簡単に作成できます。

http://jsfiddle.net/dmpWa/19/

于 2011-10-24T05:53:30.690 に答える
0

おっしゃるとおり、スライド効果。jsFiddle mootools から jquery に移行する場合は、多数の関数に煩わされるのをやめた方がよいかもしれません。単純な宣言型 jquery は、このような簡単なことを殺してしまいます。

<div class="topPanel"></div>
<div class="topTab"><a href="#">Top Panel</a></div>

...

$('.topTab a').toggle(function(){
    $(this).parent().prevUntil('.topTab').slideDown();
},function(){
    $(this).parent().prevUntil('.topTab').slideUp();
});
于 2011-10-24T06:09:07.353 に答える