使用 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'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; style = 'height: 30px; width: 100%; margin: 0; padding: 0; border: 1px solid #7f7f7f; padding-left: 25px; font-size: 15px; color: #666666;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-top-left-radius: 5px; border-top-right-radius: 5px;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: flex; flex-direction: row; text-align: left; align-items: center; justify-content: left; position: relative;'>&nbsp; Header&nbsp; <div id = 'Div2'&nbsp; &nbsp; &nbsp; &nbsp;onclick = "{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var GetText = document.getElementById('Div2').innerHTML;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if (GetText == '&#8722;') {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div1').style.borderBottom = '0px';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div3').offsetHeight = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div3').style.height = '100px';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div2').innerHTML = '&#43;';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div1').style.borderBottom = '1px';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div3').offsetHeight = 'auto';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div3').style.height = '0px';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;document.getElementById('Div2').innerHTML = '&#8722;';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;};"&nbsp; &nbsp; &nbsp; &nbsp;style = 'margin: 0; padding: 0; position: absolute; right: 0; top: 0; height: 30px; width: 30px; color: #999999; cursor: pointer;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex; flex-direction: row; text-align: center; align-items: center; justify-content: center; background-color: rgba(0,0,0,.0);'>&nbsp; &nbsp; &#8722;&nbsp; </div></div><div id = 'Div3'&nbsp; &nbsp; &nbsp;style = 'height: auto; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid #7f7f7f; border-top: 0px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; '>&nbsp; <div style = 'height: auto; mim-height: 0px; width: 100%; margin: 0; padding: 0; padding: 12px; font-size: 15px; color: #666666;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: left; '>&nbsp; &nbsp; Answer&nbsp; </div></div>更新：您可以使用 height 属性，而不是使用 style 属性：document.getElementById('Div3').style.height = '100px';document.getElementById('Div3').style.height = '0px';

Answer 3

请更换document.getElementById('Div3').offsetHeight&nbsp;=&nbsp;1;到&nbsp;document.getElementById('Div3').style.height&nbsp;=&nbsp;'1px';和document.getElementById('Div3').offsetHeight&nbsp;=&nbsp;'auto';到document.getElementById('Div3').style.height&nbsp;=&nbsp;'auto';