亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么當高度設置為 0 時我的 div 仍然顯示?

為什么當高度設置為 0 時我的 div 仍然顯示?

慕萊塢森 2022-01-13 17:27:39
我知道這可能是一個以前被問過的問題,但我還沒有找到解決這個問題的帖子或其他問題。我想通過切換#mobileMenu div的高度來使用Javascript制作一個下拉移動菜單。我希望 div 在加載文檔時的初始高度為 0,并在單擊觸發按鈕時添加其全高。唯一的問題是當我將 div 的初始高度設置為 0 時,文檔仍然顯示 div 的高度27.59px對我來說沒有多大意義。我試過添加:overflow: hidden; / line-height: 0; / display: block但無論我做什么,div 的高度都不會低于 27.59px。我什至完成了 Javascript 功能,并且 div 將打開到 154px 的高度,但是當它關閉時它會回到27.59px而不是 0。const openBtn = document.querySelector('.open');const closeBtn = document.querySelector('.close');const mobileMenu = document.getElementById('mobileMenu');openBtn.addEventListener('click', e => {  mobileMenu.classList.remove('hidden');  mobileMenu.classList.add('active');  openBtn.style.display = 'none';  closeBtn.style.display = 'block';});closeBtn.addEventListener('click', e => {  mobileMenu.classList.remove('active');  mobileMenu.classList.add('hidden');  openBtn.style.display = 'block';  closeBtn.style.display = 'none';});* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  position: relative;}/* Header */header {  display: flex;  justify-content: space-around;  align-items: center;  padding: .5rem;  height: 60px;  position: fixed;  top: 0;  left: 0;  right: 0;}header h2 {  font-family: 'Calistoga';  letter-spacing: 2px;}header i {  font-size: 1.5rem;}header i:hover {  cursor: pointer;}header i.close {  display: none;}/* Mobile Nav */#mobileMenu {  padding: .8rem 0;  border-top: 1px solid #000;  border-bottom: 1px solid #000;  position: fixed;  top: 92px;  left: 0;  right: 0;  overflow: hidden;  transition: height .7s ease-in-out;}#mobileMenu.hidden {  height: 0;  line-height: 0;  display: block;}#mobileMenu.active {  height: 154px;}.mobile-nav {  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  list-style: none;}.mobile-nav li {  padding: .3rem 0;}不管有沒有overflow: hidden; / line-height: 0; / display: block結果,結果都是一樣的。任何幫助將非常感激。感謝您的時間。
查看完整描述

1 回答

?
DIEA

TA貢獻1820條經驗 獲得超2個贊

嘗試在 mobileMenu div 上設置 hidden 屬性,并在單擊按鈕時相應更新。這樣你就可以避免弄亂 css 類


const openBtn = document.querySelector('.open');

const closeBtn = document.querySelector('.close');

const mobileMenu = document.getElementById('mobileMenu');


openBtn.addEventListener('click', e => {

  mobileMenu.hidden = false;

  //mobileMenu.classList.add('active');

  openBtn.style.display = 'none';

  closeBtn.style.display = 'block';

});


closeBtn.addEventListener('click', e => {

  //mobileMenu.classList.remove('active');

  mobileMenu.hidden = true;

  openBtn.style.display = 'block';

  closeBtn.style.display = 'none';

});

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}


body {

  position: relative;

}



/* Header */


header {

  display: flex;

  justify-content: space-around;

  align-items: center;

  padding: .5rem;

  height: 60px;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

}


header h2 {

  font-family: 'Calistoga';

  letter-spacing: 2px;

}


header i {

  font-size: 1.5rem;

}


header i:hover {

  cursor: pointer;

}


header i.close {

  display: none;

}



/* Mobile Nav */


#mobileMenu {

  padding: .8rem 0;

  border-top: 1px solid #000;

  border-bottom: 1px solid #000;

  position: fixed;

  top: 92px;

  left: 0;

  right: 0;

  overflow: hidden;

  transition: height .7s ease-in-out;

}


#mobileMenu.hidden {

  height: 0;

  line-height: 0;

  display: block;

}


#mobileMenu.active {

  height: 154px;

}


.mobile-nav {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  list-style: none;

}


.mobile-nav li {

  padding: .3rem 0;

}


.mobile-nav li a {

  text-decoration: none;

  font-size: 1.2rem;

  color: #000;

}

<header>

  <h2>Website Header</h2>

  <i class="fas fa-chevron-down open"></i>

  <i class="fas fa-chevron-up close"></i>

</header>


<div id="mobileMenu" hidden>

  <ul class="mobile-nav">

    <li>

      <a href="#">Home</a>

    </li>

    <li>

      <a href="#">Services</a>

    </li>

    <li>

      <a href="#">About</a>

    </li>

    <li>

      <a href="#">Contact</a>

    </li>

  </ul>

</div>


查看完整回答
反對 回復 2022-01-13
  • 1 回答
  • 0 關注
  • 395 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號