我们目前正在构建一个响应式网站，其中包含带有滑动内容的 div 网格。我使用以下脚本取得了一些成功：
<script>
$(document).ready(function(){
var width = $(".inner").width();
var toggle = true;
$(".wrapper").click(function(){
if(toggle) {
$(".inner").stop().animate({left:0},1000);
} else {
$(".inner").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
</script>
<script>
$(document).ready(function(){
var width = $(".inner-two").width();
var toggle = true;
$(".wrapper-two").click(function(){
if(toggle) {
$(".inner-two").stop().animate({left:0},1000);
} else {
$(".inner-two").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
</script>
<script>
$(document).ready(function(){
var width = $(".inner-three").width();
var toggle = true;
$(".wrapper-three").click(function(){
if(toggle) {
$(".inner-three").stop().animate({left:0},1000);
} else {
$(".inner-three").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
</script>
<script>
$(document).ready(function(){
var width = $(".inner-four").width();
var toggle = true;
$(".wrapper-four").click(function(){
if(toggle) {
$(".inner-four").stop().animate({left:0},1000);
} else {
$(".inner-four").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
</script>
<script>
$(document).ready(function(){
var width = $(".inner-five").width();
var toggle = true;
$(".wrapper-five").click(function(){
if(toggle) {
$(".inner-five").stop().animate({left:0},1000);
} else {
$(".inner-five").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
</script>
<script>
$(document).ready(function(){
var width = $(".inner-seven").width();
var toggle = true;
$(".wrapper-seven").click(function(){
if(toggle) {
$(".inner-seven").stop().animate({left:0},1000);
} else {
$(".inner-seven").stop().animate({left:-width},1000);
}
toggle = !toggle;
});
});
</script>
正如您所看到的，我对 jquery 的理解并不多，所以我确信有更好的方法来编写这个，而不是采用所采用的方法。我希望以某种方式可以给我一些指针或重写脚本，使其更像一个数组，而不是具有不同 id 和类的相同代码的丑陋重复列表？
任何帮助将不胜感激
如果有帮助，可以发布小提琴。