Javascript 如何在点击菜单中的元素时自动移动它们

起初，一切都是这样。类别在左边。我在菜品和网站上使用bootstrap。
您可以建议如何操作：在打开一个类别时，您需要将菜品切换到col-md-offset-3

例如，如果有更多类别/子类别，则需要对左侧的盘子进行进一步的偏移。问题是我根本不知道怎么做。做，而不是我不需要，至少告诉

现在我有了他的作品。 如果要在所有屏幕上展开结果，最好查看代码

var blockRect=document.querySelector（'.block'）.getBoundingClientRect（）；
var foods=document.queryselectoral（“.food”）；
函数切换子类别（_category，init）{
if（！init）{
document.querySelectorAll（“.subcategory”）.forEach（函数（类别）{
如果（类别！==\u类别）{
category.classList.remove（'show'）；
}
});
_category.classList.toggle（'show'）；
}
}
函数结构（）{
return document.querySelectorAll（'.subcategory.show'）。长度===0？false:true；
}
函数foodOffset（类别，init）{
var subcategories=document.querySelector（'.list structure>ul'）；
var OFFSETLISTOFOOD=子类别.offsetHeight-BLOCKERECT.height；
切换子类别（category.children[1]，init）；
var isOpen=isopenstructure（）；
if（子类别.offsetHeight>=块矩形高度）{
食品.forEach（功能（食品，指数）{
var nextFoodIndex=指数；
var foodRectData=food.getBoundingClientRect（）；
//检测遗留食物
如果（foodRectData.left=foodRectData.top&&absoluteListHeight）{
位置：绝对位置；
宽度：100%高度：100%；
}
.类别{
填充：10px；
}
.子类别{
显示：无；
}
.街区{
边框：1px纯蓝色；
填充：10px；
高度：200px；
}
.食物{
填充：10px；
}
.表演{
显示：块；
}
.隐藏{
显示：无；
}

asdsakjdslkajdklsad

您的代码段需要包含引导css和js文件。请查看一下。结果中没有显示任何内容。@Chirag updated