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

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

CSS Div 上滑不带内容

CSS Div sliding up doesn't take contents with it

html

javascript

css

css-transitions