时间戳

首页 > 解决方案 > 如何让div展开

javascript - 如何让div展开

问题描述

得到伙计们，

以下代码在单击 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 吗？

提前致谢

标签： javascriptjqueryhtmlcss

解决方案

将状态添加到动态更改的 html。

有多种方法。以下代码使用maxHeight可见性被切换的 div 上的 css 属性的值，该属性在使文本可见时无论如何都会更改。

这不是最干净的方法，但会显示原理并使对给定代码的更改最小：

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>

推荐阅读