第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何讓div展開

如何讓div展開

喵喵時(shí)光機(jī) 2023-12-19 10:06:25
伙計(jì)們，當(dāng)單擊 div 打開時(shí)，以下代碼工作正常，但我需要在再次單擊按鈕時(shí)將其關(guān)閉這是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>有人可以幫我讓它在再次單擊按鈕時(shí)隱藏 div 嗎？提前非常感謝
查看完整描述

3 回答

?
撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊

將狀態(tài)添加到動(dòng)態(tài)更改的 html 中。


有多種方法。以下代碼使用可見性已切換的 div 上的 css 屬性 maxHeight 的值，該屬性在將文本變?yōu)榭梢姇r(shí)無(wú)論如何都會(huì)更改。


這不是最干凈的方法，但會(huì)顯示原理并盡量減少對(duì)給定代碼的更改：


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>


查看完整回答
反對(duì) 回復(fù) 2023-12-19
?
明月笑刀無(wú)情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

您可以在函數(shù)中包含一個(gè)檢查，以查看當(dāng)前的 maxHeight 是什么，并根據(jù)結(jié)果更改 maxHeight 的狀態(tài)。如果您決定稍后更改 maxHeight，請(qǐng)使用不等式運(yùn)算符，如下所示。


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";

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-12-19
?
慕桂英4014372

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超13個(gè)贊

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


查看完整回答
反對(duì) 回復(fù) 2023-12-19
  • 3 回答
  • 0 關(guān)注
  • 186 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)