0

各パネルの高さを計算し、この値を変数として返す単純なテキスト アコーディオンを作成しようとしています。のような if ステートメントで値を取得できますがif ( i === 0 ) { $(this).height(); }、この変数を外部に取得することはできません。変数を使用せずにこれを行うことはできますが、長期的には役に立たなくなりました。

簡単heightに言うと、各要素を計算し、この変数を関数内で使用したいと考えていclickます。

これが問題を含むjsFiddleです。

var panel = $('.holder div');
var trigger = $('a');

panel.each(function(i) {
    //problem starts when i try to calculate each ele's height
    var eachEleHeight = i.height();

    trigger.click(function() {
        $(this).prev('div').animate({'height':eachEleHeight+'px'},500);

        //this works widthout var eachEleHeight but became useless
        //$(this).prev('div').animate({'height':'300px'},500);
    });

    //this is for hiding text at doc.ready
    panel.css('height','56px');
});​
4

4 に答える 4

1

私がよく理解しているなら、これを試してください：

panel.each(function(i, el) {

    // create a reference to te current panel
    var $el = $(el);    

    // execute a function immediately, passing both the panel and its height
    (function(p, h) {
        // the trigger is targeted as the next link after the current panel
        p.next('a').click(function() {
           p.animate({ height : h + 'px'},500);
        });
    }($el, $el.height()));

    // set each panel height 
    $el.css('height','56px');
});

フィドルの例：http：//jsfiddle.net/Aw39W/55/

于 2012-09-11T15:12:51.193 に答える
0

使用した一連のイベントは少し奇妙に思えます。実際には、各要素のすべてのaタグにクリック イベントをバインドしています。panelこれを試してください:フィドル

min-heightおよびcss 属性を使用してmax-height、高さ変数への/からの初期値を格納しました。これにより、開始時の高さが自動的に取得されます。

于 2012-09-11T17:29:23.953 に答える
0

質問が理解できれば、アコーディオン アニメーション機能の要素の高さが必要です。これはトリックですが、うまくいきます。Mootools をよく使うので、それを使って書いていきます。あなたはそれを理解できるはずです。

var orgHeight = i.offsetHeight;
i.setStyle('height','100%');
var eachEleHeight = i.offsetHeight;
i.setStyle('height',orgHeight);

基本的に、要素を反転して高さを明らかにし、ドキュメントが画面に表示される前に反転します。

これがまさにあなたが探していたものかどうかはわかりませんが、お役に立てば幸いです。

于 2012-09-11T16:04:12.543 に答える
0

投稿したコードに問題があります。i現在の要素のインデックスです。要素そのものではありません。

試すvar eachEleHeight = $(this).height();

フィドル

于 2012-09-11T15:14:50.147 に答える