使用 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/none 样式属性来隐藏或显示元素。您可以在事件侦听器函数上使用布尔值并运行 if/else 循环在“-”和“+”之间切换。希望这对您有所帮助，如果您需要更多帮助，请随时联系我！

Answer 2

您可能想使用 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';

Answer 3

请更换

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

到

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

和

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

到

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