query手风琴插件封装函数

最新推荐文章于 2022-06-29 02:12:01 发布

原创最新推荐文章于 2022-06-29 02:12:01 发布 · 140 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的手风琴菜单动画效果，通过动态调整li元素的宽度来达到展开和收起的效果，实现了菜单项的交互式展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.fn.accordion=function (colors,width) {
    //如果用户没有传参数，设置默认值
    colors=colors ||[];
    width=width || 20;

    //让当前的对象去找li
    var $li=this.find("li");
    // $li.each(function (index, ele) {
    //     $(ele).css("backgroundColor",colors[index]);
    // })
    $("#box li").each(function (index, ele) {
        $(ele).css("backgroundImage","url(images/"+(index+1)+".jpg)");
    })
    //获取当前显示800的那个宽度 : 总宽度 - width*剩下四个li的长度
    var maxLength=this.width()-width*($li.length-1)
    //计算240的宽度  即平均宽度
    var vagLength=this.width()/$li.length;
    $li.mouseenter(function () {
        $(this).stop().animate({width:maxLength}).siblings().stop().animate({width:width})
    })
    $li.mouseleave(function () {
        $li.stop().animate({width:vagLength})
    })
}