使用Java脚本折叠和取消折叠div

Question

我创建了一个HTML片段，如下所示-

<div id = 'Div1' 
style = 'height: 30px; width: 100%; margin: 0; padding: 0; border: 1px solid #7f7f7f; padding-left: 25px; font-size: 15px; color: #666666; 
border-top-left-radius: 5px; border-top-right-radius: 5px; 
display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: left; position: relative;'>
Header
<div id = 'Div2'
onclick = "{
var GetText = document.getElementById('Div2').innerHTML;
if (GetText == '&#8722;') {  
document.getElementById('Div1').style.borderBottom = '0px';
document.getElementById('Div3').offsetHeight = 1;
document.getElementById('Div2').innerHTML = '&#43;';
} else {
document.getElementById('Div1').style.borderBottom = '1px';
document.getElementById('Div3').offsetHeight = 'auto';
document.getElementById('Div2').innerHTML = '&#8722;';
}
};"
style = 'margin: 0; padding: 0; position: absolute; right: 0; top: 0; height: 30px; width: 30px; color: #999999; cursor: pointer; 
display: flex; flex-direction: row; text-align: center; align-items: center; justify-content: center; background-color: rgba(0,0,0,.0);'>
&#8722;
</div>
</div>
<div id = 'Div3'
style = 'height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid #7f7f7f; border-top: 0px;
border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; '>
<div style = 'height: auto; mim-height: 0px; width: 100%; margin: 0; padding: 0; padding: 12px; font-size: 15px; color: #666666; 
text-align: left; '>
Answer
</div>
</div>

我的目标是，如果我点击"-"符号，那么底部将塌陷，"-"符号将变为"+"。但是，当我点击"+"时，相反的情况就会发生。

对于我上面的代码，这并没有明显发生。

你能帮我了解出了什么问题吗？

Answer 1

您可以尝试使用block/noe样式属性来隐藏或显示元素。您可以在Event监听器函数上使用布尔值并运行if/else循环来在"-"one_answers"+"之间切换。希望这能有所帮助，如果你想要更多的帮助，请随时联系我！

Answer 2

请更改

document.getElementById('Div3').offsetHeight = 1;

至

document.getElementById('Div3').style.height = '1px';

和

document.getElementById('Div3').offsetHeight = 'auto';

至

document.getElementById('Div3').style.height = 'auto';

Answer 3

您可能想要使用display属性来隐藏/显示元素。像这样：

<div id = 'Div1' 
style = 'height: 30px; width: 100%; margin: 0; padding: 0; border: 1px solid #7f7f7f; padding-left: 25px; font-size: 15px; color: #666666; 
border-top-left-radius: 5px; border-top-right-radius: 5px; 
display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: left; position: relative;'>
Header
<div id = 'Div2'
onclick = "{
var GetText = document.getElementById('Div2').innerHTML;
if (GetText == '&#8722;') {  
document.getElementById('Div1').style.borderBottom = '0px';
document.getElementById('Div3').offsetHeight = 1;
document.getElementById('Div3').style.height = '100px';
document.getElementById('Div2').innerHTML = '&#43;';
} else {
document.getElementById('Div1').style.borderBottom = '1px';
document.getElementById('Div3').offsetHeight = 'auto';
document.getElementById('Div3').style.height = '0px';
document.getElementById('Div2').innerHTML = '&#8722;';
}
};"
style = 'margin: 0; padding: 0; position: absolute; right: 0; top: 0; height: 30px; width: 30px; color: #999999; cursor: pointer; 
display: flex; flex-direction: row; text-align: center; align-items: center; justify-content: center; background-color: rgba(0,0,0,.0);'>
&#8722;
</div>
</div>
<div id = 'Div3'
style = 'height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid #7f7f7f; border-top: 0px;
border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; '>
<div style = 'height: auto; mim-height: 0px; width: 100%; margin: 0; padding: 0; padding: 12px; font-size: 15px; color: #666666; 
text-align: left; '>
Answer
</div>
</div>

更新：

您可以使用height属性来代替style属性：

document.getElementById('Div3').style.height = '100px';
document.getElementById('Div3').style.height = '0px';