CSS Div 向上滑动不会带走内容

Question

我写了这段代码

			<div id='cart_top' class='cart_parts'>
				<dt class='list-item' style='margin-top: 10px;'>
					View your Quote
				</dt>
				<dd class='list-item'>
					<div id='triangle-up' class='side-by-side' style='float: right; margin-right: 20px; cursor: pointer; margin-top: 15px;' onClick='hider2()'>
				</div>
				</dd>
			</div>
			<div id='cart_body' class='cart_parts slider2 closed'>
			  Lorem Ipsum fnrjnfirmfowmciodmckwmcporcpoiermcoimiocm
              kflkwremflkrwemfklwremfklewrmfklewrmfc
              foenfoeoifcfwoicnweiocmnwecmwilmccmkldsscml
			</div>
  <style>	
.side-by-side{
	display: inline-block;
	}
	#triangle-up { width: 0; 
	height: 0; 
	border-left: 10px solid transparent; 
	border-right: 10px solid transparent;  
	border-top: 10px solid black; 
	opacity:  0.6;}
	slider2{
	overflow-y: hidden;
	transition-property: all;
	transition-duration:.5s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	}
	.slider2.closed{
	max-height: 0;
	}
	.cart_parts{
	border: 1px solid black;
	box-sizing: border-box;
	width: 60%;
	margin: 0 auto;
	}
	#cart_top{
	height: 40px;
	font-family: Tahoma;
	background-color: #DADCD3;
	margin: 0 auto;
	
	}
	#cart_body{
		text-align: center;
  background-color:  red;
	}
  </style>
  <script>
hider2=function(){
		cart_bod=document.getElementById('cart_body');
		cart_bod.classList.toggle('closed');
	};
  </script>

................................

#edit:我已经按照要求在这里插入了代码，但是，正如您所看到的，代码有点混乱。下拉菜单悬垂在左侧，但功能是相同的。

我的问题是:

当我点击向下箭头时，div像正常一样打开和关闭:边框和背景颜色像正常一样切换。问题是:当div(cart_body)，边界和背景正常切换时，div(cart_body)所包含的文本保留在原地，无论它是打开还是关闭。我希望div(cart_body)内的文本与div的其余部分切换，而不是保持可见。有人知道怎么了吗?

谢谢!

Answer 1

您在.slider2的css选择器前忘记了.，因此您的样式未应用。具体来说，这意味着元素上没有overflow-y: hidden;，因此分配max-height: 0;只会使文本溢出容器。这就是为什么你看到红色的background-color消失了，而不是文本。