Javascript 当我试图隐藏卡片样式的边栏时，会出现奇怪的行为

我创建了一个侧边栏，在卡片样式框中列出了流行的产品。但问题是当我试图隐藏卡时，卡内的图像不会隐藏。为什么会发生这种奇怪的行为？你有什么解决办法吗？如果是，请解释一下。 请参阅代码片段以获得更好的理解。

function toggleProduct（）{document.getElementById（“流行产品”）.classList.toggle（“hideproduct”）；}

#popular-product.hideproduct{
宽度：0；
-webkit过渡：宽度为0.35s，易于输入输出；
-moz过渡：宽度为0.35s，易于输入输出；
-o型过渡：宽度为0.35s，易于进出；
过渡：宽度为0.35s，易于进出；
}
#流行产品{
位置：绝对位置；
底部：0；
身高：100%；
宽度：316px；
背景色：rgb（236236236）；
背景色：rgba（2362362360.31）；
垫面：4px；
垫底：4px；
左侧填充：8px；
右边填充：8px；
-webkit过渡：宽度为0.35s，易于输入输出；
-moz过渡：宽度为0.35s，易于输入输出；
-o型过渡：宽度为0.35s，易于进出；
过渡：宽度为0.35s，易于进出；
}
#流行产品。流行产品盒{
利润率：8px 0px；
填充物：2px 1px；
高度：168px；
}
#流行产品。流行产品盒：第一个孩子{
边际：0px；
}
#流行产品。流行产品盒。内部内容{
边界半径：4px；
-webkit边界半径：4px；
-moz边界半径：4px；
盒影：0px 2px 4px rgba（0,0,0,0.1）；
-网络工具包盒阴影：0px 2px 4px rgba（0,0,0,0.1）；
-moz盒阴影：0px 2px 4px rgba（0,0,0,0.1）；
背景色：#ffffff；
高度：166px；
文本对齐：居中；
}
.内容img{
高度：104px；
宽度：86px；
}
.流行产品盒.内部内容跨度{
边际上限：0px；
字体大小：16px；
}
跨距{
字体大小：13px；
填充顶部：10px；
颜色：#fff；
边界半径：100%100%；
-webkit边界半径：100%100%；
-moz边界半径：100%100%；
垫底：10px；
左侧填充：2px；
右侧填充：2px；
位置：绝对位置；
z指数：2；
右：15px；
顶部：10px；
背景色：rgb（210,14,14）；
背景色：rgba（210,14,14,0.78）；
}

.复选框滑块--b输入+范围：之后{
顶部：-7px；
}	
显示/隐藏
七折

发生这种情况是因为.hideproduct只更改容器的宽度，高度设置为100%，将显示容器内的图像。您可以将.hideproduct设置为也将高度设置为0，这将解决问题，但可能不是您想要的行为

    <img id="content-img-1" src="http://www.ikea.com/gb/en/images/products/dr%C3%B6na-box-blue__0162140_pe317380_s4.jpg" alt="poplular product" class="content-img"
   />

更好的解决方案是将.hideproduct设置为修改边距，将容器移出视口

    <img id="content-img-1" src="http://www.ikea.com/gb/en/images/products/dr%C3%B6na-box-blue__0162140_pe317380_s4.jpg" alt="poplular product" class="content-img"
   />

function toggleProduct（）{document.getElementById（“流行产品”）.classList.toggle（“hideproduct”）；}

#popular-product.hideproduct{
边际：0-316px；
-webkit过渡：边距0.35秒缓进缓出；
-moz过渡：边距0.35秒缓进缓出；
-o型过渡：裕度0.35秒缓进缓出；
过渡：裕度0.35秒缓进缓出；
}
#流行产品{
保证金：0；
位置：绝对位置；
底部：0；
身高：100%；
宽度：316px；
背景色：rgb（236236236）；
背景色：rgba（2362362360.31）；
垫面：4px；
垫底：4px；
左侧填充：8px；
右边填充：8px；
-webkit过渡：宽度为0.35s，易于输入输出；
-moz过渡：宽度为0.35s，易于输入输出；
-o型过渡：宽度为0.35s，易于进出；
过渡：宽度为0.35s，易于进出；
}
#流行产品。流行产品盒{
利润率：8px 0px；
填充物：2px 1px；
高度：168px；
}
#流行产品。流行产品盒：第一个孩子{
边际：0px；
}
#流行产品。流行产品盒。内部内容{
边界半径：4px；
-webkit边界半径：4px；
-moz边界半径：4px；
盒影：0px 2px 4px rgba（0,0,0,0.1）；
-网络工具包盒阴影：0px 2px 4px rgba（0,0,0,0.1）；
-moz盒阴影：0px 2px 4px rgba（0,0,0,0.1）；
背景色：#ffffff；
高度：166px；
文本对齐：居中；
}
.内容img{
高度：104px；
宽度：86px；
}
.流行产品盒.内部内容跨度{
边际上限：0px；
字体大小：16px；
}
跨距{
字体大小：13px；
填充顶部：10px；
颜色：#fff；
边界半径：100%100%；
-webkit边界半径：100%100%；
-moz边界半径：100%100%；
垫底：10px；
左侧填充：2px；
右侧填充：2px；
位置：绝对位置；
z指数：2；
右：15px；
顶部：10px；
背景色：rgb（210,14,14）；
背景色：rgba（210,14,14,0.78）；
}

.复选框滑块--b输入+范围：之后{
顶部：-7px；
}	
显示/隐藏
七折

发生这种情况是因为.hideproduct只更改容器的宽度，高度设置为100%，将显示容器内的图像。您可以将.hideproduct设置为也将高度设置为0，这将解决问题，但可能不是您想要的行为

    <img id="content-img-1" src="http://www.ikea.com/gb/en/images/products/dr%C3%B6na-box-blue__0162140_pe317380_s4.jpg" alt="poplular product" class="content-img"
   />

更好的解决方案是将.hideproduct设置为修改边距，将容器移出视口

    <img id="content-img-1" src="http://www.ikea.com/gb/en/images/products/dr%C3%B6na-box-blue__0162140_pe317380_s4.jpg" alt="poplular product" class="content-img"
   />

function toggleProduct（）{document.getElementById（“流行产品”）.classList.toggle（“hideproduct”）；}

#popular-product.hideproduct{
边际：0-316px；
-webkit过渡：边距0.35秒缓进缓出；
-moz过渡：边距0.35秒缓进缓出；
-o型过渡：裕度0.35秒缓进缓出；
过渡：裕度0.35秒缓进缓出；
}
#流行产品{
保证金：0；
位置：绝对位置；
底部：0；
身高：100%；
宽度：316px；
背景色：rgb（236236236）；
背景色：rgba（2362362360.31）；
垫面：4px；
垫底：4px；
左侧填充：8px；
右边填充：8px；
-webkit过渡：宽度为0.35s，易于输入输出；
-moz过渡：宽度为0.35s，易于输入输出；
-o型过渡：宽度为0.35s，易于进出；
过渡：宽度为0.35s，易于进出；
}
#流行产品。流行产品盒{
利润率：8px 0px；
填充物：2px 1px；
高度：168px；
}
#流行产品。流行产品盒：第一个孩子{
边际：0px；
}
#流行的-