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

您发布的代码有问题。i是当前元素的索引。不是元素本身。

尝试var eachEleHeight = $(this).height();

小提琴

于 2012-09-11T15:14:50.147 回答
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

您使用的事件顺序似乎有点奇怪。您实际上是在将 click 事件绑定到a每个panel元素的所有标签。试试这个：小提琴

我只是使用min-height和max-heightcss 属性来存储初始到/从高度变量。这将自动获得您的起始高度。

于 2012-09-11T17:29:23.953 回答