Javascript 幻灯片内容动画

这是我的内容，不同的内容有不同的行为，例如当第1列单击第2列、第3列、第4列时向右移动，如果第4列单击它，则将所有内容推到左侧

Jquery

$("#toogle-1").click(function () {
    $(".WSUA__column__two").animate({ left: '50%' });
    $(".WSUA__column__three").animate({ right: '-25%' });
    $(".WSUA__column__four").animate({ right: '-50%' });
    $("span.hidden-menu.toogle-1").show();
    $("div.hidden-cross.toogle-1").show();
    $("#toogle-1").hide();
    $("#toogle-2").addClass("unclickable");
    $("#toogle-3").addClass("unclickable");
    $("#toogle-4").addClass("unclickable");
});
$("div.hidden-cross.toogle-1").click(function () {
    $(".WSUA__column__two").animate({ left: '25%' });
    $(".WSUA__column__three").animate({ right: '0%' });
    $(".WSUA__column__four").animate({ right: '-25%' });
    $(".hidden-menu").hide();
    $("div.hidden-cross.toogle-1").hide();
    $("#toogle-1").show();
    $("#toogle-2").removeClass("unclickable");
    $("#toogle-3").removeClass("unclickable");
    $("#toogle-4").removeClass("unclickable");
});

有没有办法在不声明toogle-1、toogle-2、toogle-3和toogle-4的情况下创建函数？假设我想创建另一个类似这样的内容，我必须复制所有jquery并更改所有toogle。

这就是你的意思吗

jQuery（文档）.ready（函数（）{
jQuery（'.container>div:n个子（奇数）'）。单击（函数（）{
jQuery（this.nextAll（）.toggleClass（'sides-move-odd'）；
jQuery（this）.toggleClass（'active-odd'）；
});
jQuery（'.container>div:n个子（偶数）'）。单击（函数（）{
jQuery（this.prevAll（）.toggleClass（'sides-move-even'）；
jQuery（this）.toggleClass（'active-even'）；
});
});
.container{
}
.container>div{
显示：内联块；
宽度：25%；
浮动：左；
位置：相对位置；
过渡：左1秒进入；
左：0；
}
.container>div.sides-move-odd{
左：25%；
过渡：左1秒进入；
}
.container>div.sides-move-even{
左-25%；
过渡：左1秒进入；
}
.货柜部右{
背景：灰色；
高度：18px；
宽度：0%；
显示：内联块；
位置：绝对位置；
过渡：宽度为1s，易于插入；
}
.容器分区：第n个子项（奇数）。右{
左：100%；
}
.容器分区：第n个子项（偶数）。对{
右：100%；
}
.container>div.active-odd.右{
宽度：100%；
过渡：宽度为1s，易于插入；
}
.container>div.active-even.右{
宽度：100%；
过渡：宽度为1s，易于插入；
}

1.
2.
3.
4.