【发布时间】：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 的其余部分一起切换，而不是保持可见。有谁知道怎么回事？
谢谢！
【问题讨论】：
-
请在此处显示代码...
-
这不是“完全可以接受”。阅读帮助部分...“寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现 它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建最小、完整和可验证的示例。“
-
见“帮助他人重现问题”@stackoverflow.com/help/how-to-ask，只是想帮助...
-
@Mr.Chameleon 问题不在于 LIveWeave - 你是对的，这完全是一个有用的工具，也是你问题的一个很好的补充。问题是您也没有在实际问题中提供代码。将来，那个 Weave 可能会消失，这篇文章的未来读者将不知道你的问题实际上是关于什么的。您需要发布代码； LiveWeave（或 JSFiddle）是有用的，但可选的附加组件。
-
@Mr.Chameleon：关于代码格式，您需要做的就是确保您的代码在每个起始行缩进四个空格。您可以手动执行此操作，或突出显示它并按
{}按钮或Ctrl+K。如果你给他们一个公平的机会，代码格式化工具就会很好地工作。如果仍有问题，请查看editing help 页面。
标签： javascript html css css-transitions