如何让div展开

Question

伙计们，当单击 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 吗？提前非常感谢

Answer 1

将状态添加到动态更改的 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>

Answer 2

您可以在函数中包含一个检查，以查看当前的 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";

  }

}

Answer 3

您可以使用 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>