伙計們，當單擊 div 打開時，以下代碼工作正常，但我需要在再次單擊按鈕時將其關閉這是JS<script type="text/javascript">function slide(){document.getElementById("sliding").style.maxHeight = "1000px";}</script>這是CSS#sliding{ transition: 0.5s; max-height: 0px; overflow: hidden;}和html <button onclick ="slide();" class="btn btn-primary">ADD COMMENT</button> <div id = "sliding"> <p>TEST</p> </div>有人可以幫我讓它在再次單擊按鈕時隱藏 div 嗎？提前非常感謝
3 回答
撒科打諢
TA貢獻1934條經驗 獲得超2個贊
將狀態添加到動態更改的 html 中。
有多種方法。以下代碼使用可見性已切換的 div 上的 css 屬性 maxHeight 的值，該屬性在將文本變為可見時無論如何都會更改。
這不是最干凈的方法，但會顯示原理并盡量減少對給定代碼的更改：
function slide(){
if (parseInt(document.getElementById("sliding").style.maxHeight) === 0) {
document.getElementById("sliding").style.maxHeight = "1000px";
} else {
document.getElementById("sliding").style.maxHeight = "0px";
}
}
#sliding{
transition: 0.5s;
max-height: 0px;
overflow: hidden;
}
<button onclick ="slide();" class="btn btn-primary">ADD COMMENT</button>
<div id = "sliding">
<p>TEST</p>
</div>
明月笑刀無情
TA貢獻1828條經驗 獲得超4個贊
您可以在函數中包含一個檢查，以查看當前的 maxHeight 是什么，并根據結果更改 maxHeight 的狀態。如果您決定稍后更改 maxHeight，請使用不等式運算符，如下所示。
function slide(){
elem = document.getElementById("sliding");
elemHeight = elem.style.maxHeight;
elemHeight.replace("px", "");
if (elemHeight > "0") {
elem.style.maxHeight = "0px";
}
else {
elem.style.maxHeight = "1000px";
}
}
慕桂英4014372
TA貢獻1871條經驗 獲得超13個贊
您可以使用 classList.toggle 方法。
function slide(){ document.getElementById("sliding").classList.toggle('sliding-show')
}
#sliding{
transition: 0.5s;
max-height: 0px;
display: none;
}
#sliding.sliding-show {
display: block;
max-height: 1000px;
}
<button onclick ="slide()" class="btn btn-primary">ADD COMMENT</button>
<div id="sliding">
<p>TEST</p>
</div>
- 3 回答
- 0 關注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消