Question

我正在尝试构建一个简单的水平手风琴，最终将包含更复杂的数据（iframe）......问题是我希望每个手风琴标签的大小都特定于它包含的数据，所以我'我试图编辑那里已有的东西（有些标签比其他标签大）。当用户将鼠标悬停在任何标签上时，我希望将该标签扩展到50％（无论之前的大小如何）。一切正常，但问题是我无法弄清楚如何在mouseout后返回标签ORIGINAL宽度。现在我让面板缩小到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})  
    });  
});

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

水平手风琴中的Jquery选择器

2 个答案: