javascript - 水平 Accordion 中的 Jquery 选择器

Question

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

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

Answer 1

您可以在某处保存原始宽度。这是一种方式(使用您的代码):

$(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})  
    });  
}); 

未经测试，您可能会选择不同的方式来保存它，但总体思路就在那里。