CSS Div 向上滑动不带内容

Posted 2023-03-06

【中文标题】CSS Div 向上滑动不带内容

【英文标题】：CSS Div sliding up doesn't take contents with it

【发布时间】：2015-10-20 23:00:42

【问题描述】：

我有这段代码

			<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 的其余部分一起切换，而不是保持可见。有谁知道怎么回事？

谢谢！

【问题讨论】：

请在此处显示代码...

这不是“完全可以接受”。阅读帮助部分...“寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现 它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建最小、完整和可验证的示例。“

见“帮助他人重现问题”@***.com/help/how-to-ask，只是想帮助...

@Mr.Chameleon 问题不在于 LIveWeave - 你是对的，这完全是一个有用的工具，也是你问题的一个很好的补充。问题是您也没有在实际问题中提供代码。将来，那个 Weave 可能会消失，这篇文章的未来读者将不知道你的问题实际上是关于什么的。您需要发布代码； LiveWeave（或 JSFiddle）是有用的，但可选的附加组件。

@Mr.Chameleon：关于代码格式，您需要做的就是确保您的代码在每个起始行缩进四个空格。您可以手动执行此操作，或突出显示它并按 按钮或Ctrl+K。如果你给他们一个公平的机会，代码格式化工具就会很好地工作。如果仍有问题，请查看editing help 页面。

【参考方案1】：

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

【讨论】：

谢谢。我错过了一个简单的错误，因为我写的文件来自它包含近一千行，而我只是错过了它。

没问题。有价值的部分是您可以从问题的 cmets 中学到什么。