水平手风琴中的jQuery选择器

Question

我正在尝试构建一个简单的水平手风琴，该手风琴最终将包含更复杂的数据（iframe）...问题是我希望每个手风琴选项卡的大小都特定于它所包含的数据，所以我试图编辑那里已有的内容（某些标签比其他标签大）。 当用户将鼠标悬停在任何选项卡上时，我希望将该选项卡扩展到50％（无论其先前的大小如何）。 一切正常，但问题是我无法弄清楚鼠标移出后如何返回到选项卡原始宽度。 现在，我将面板缩小到10％以说明问题。 如果您浏览页面，然后重新加载，您将明白我的意思。 有任何想法吗？

http://www.brianvargo.com/test.html

Answer 1

在与您类似的情况下对我有用的方法是，创建一个具有所述元素加载时的原始大小的属性，然后将其检索以供以后使用。

Answer 2

您可以将原始宽度保存在某处。 这是一种方法（使用您的代码）：

$(document).ready(function(){  
    $("ul li").mouseover(function(){
        if (this.originalWidth == undefined) this.originalWidth = $(this).width();
        $(this).stop().animate({width:'50%'},{queue:false, duration:500,}) 
    });  

    $("ul li").mouseout(function(){  
        $(this).stop().animate({width: this.originalWidth},{queue:false, duration:600})  
    });  
}); 

未经测试，您可以选择其他方式保存它，但是总的想法就在那里。