Javascript 如果一个类存在于另一个div中，则更改div的高度

如果

#collapsableTable

div中存在

.collapsableTable类，我想在单击
#tblHideShow
时增加
.custom-main-container1
的高度


$（'tblHideShow'）。单击（函数（）{
$（'#collapsableTable'）。toggleClass（'collapsableTable'）；
if（$（'#collapsableTable'）.hasClass（'collasing'））{
$（this.parent（）.sides（'.custom-main-container1'）.css（“高度”，“计算（100%-241px）”）；
}否则{
$（this.parent（）.sides（'.custom-main-container1'）.css（“高度”，“计算（100%-314px）”）；
}
});
body，html{
身高：100%；
}

div内容在这里
div内容在这里
如果我正确理解您的问题，以下代码剪辑将适用于您：



$（'#tblHideShow'）。单击（函数（）{
$（'#collapsableTable'）。toggleClass（'collapsableTable'）；
if（$（'#collapsableTable'）.hasClass（'collasing'））{
$（this）.parent（）同级（'.custom-main-container1'）.css（“高度”，“200px”）；
}否则{
$（this）.parent（）.sides（'.custom-main-container1'）.css（“高度”，“100px”）；
}
});
.custom-main-container1{
高度：200px；
背景色：#45b6fe；
字体大小：35px；
填充：5%；
边界半径：5px；
}
.xyz{
背景色：#daf0ff；
高度：100px；
字体大小：35px；
左：5%；
边界半径：5px；
}
.崩溃{
显示：无；
}
.class2>#class1{
文本对齐：居中；
颜色：蓝色；
}
正文，html{
身高：100%；
}

可变高div内容在这里
可折叠的div内容
我将您的代码放在一个代码段中，在该代码段中，您可以使用DOM inspector工具验证它是否工作正常。UI不会更新，因为除非所有父元素上都设置了明确的高度，否则100%高度不起作用。我已更新了代码段，在
正文
和
html
元素上设置了
height
，以便CSS更新现在生效。