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

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

CSS Div向上滑动不会带内容

1 个答案: