我創建了一個 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 == '−') { document.getElementById('Div1').style.borderBottom = '0px'; document.getElementById('Div3').offsetHeight = 1; document.getElementById('Div2').innerHTML = '+'; } else { document.getElementById('Div1').style.borderBottom = '1px'; document.getElementById('Div3').offsetHeight = 'auto'; document.getElementById('Div2').innerHTML = '−'; } };" 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);'> − </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>我的目標是，如果我單擊"-"標志，則底部部分將折疊并且"-"標志將更改為"+"。但是，當我點擊"+"時，就會發生相反的情況。通過我上面的代碼，這并沒有明顯發生。您能幫我了解出了什么問題嗎？
3 回答
Helenr
TA貢獻1780條經驗 獲得超4個贊
您可以嘗試使用 block/none 樣式屬性來隱藏或顯示元素。您可以在事件偵聽器函數上使用布爾值并運行 if/else 循環在“-”和“+”之間切換。希望這對您有所幫助，如果您需要更多幫助，請隨時聯系我！
偶然的你
TA貢獻1841條經驗 獲得超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 == '−') {
document.getElementById('Div1').style.borderBottom = '0px';
document.getElementById('Div3').offsetHeight = 1;
document.getElementById('Div3').style.height = '100px';
document.getElementById('Div2').innerHTML = '+';
} else {
document.getElementById('Div1').style.borderBottom = '1px';
document.getElementById('Div3').offsetHeight = 'auto';
document.getElementById('Div3').style.height = '0px';
document.getElementById('Div2').innerHTML = '−';
}
};"
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);'>
−
</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';
汪汪一只貓
TA貢獻1898條經驗 獲得超8個贊
請更換
document.getElementById('Div3').offsetHeight = 1;到
document.getElementById('Div3').style.height = '1px';和
document.getElementById('Div3').offsetHeight = 'auto';到
document.getElementById('Div3').style.height = 'auto';- 3 回答
- 0 關注
- 177 瀏覽
添加回答
舉報
0/150
提交
取消