重繪頁面后，漢堡包切換器的影片不能立即作業 -有解無憂

漢堡包切換器影片在我重繪頁面后沒有立即作業，它在我點擊一次后開始作業。主選單在我第一次點擊openMenu時沒有出現影片，我不明白它怎么可能在我第二次點擊后作業。

。

const mainMenu = document. querySelector(".mainMenu") 。
const closeMenu = document.querySelector(".closeMenu") 。
const openMenu = document.querySelector(".openMenu") 。
openMenu.addEventListener("click", () =>  {
    mainMenu.style.display = "flex"/span>;
    mainMenu.style.top="0"。
});
closeMenu.addEventListener("click", () =>  {
    mainMenu.style.top = "-100%"/span>;
});

.row .left {
  height: 98vh;
  background-color: #5a2a19;
}

.row .right {
  height: 98vh;
  background-color: #ff640b;
}

.row .right nav .openMenu {
  font-size: 3em;
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: 指標。
}

.row .right nav .mainMenu {
  background-color: #ff640b;
  高度。100vh;
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  left: 50%;
  z-index: 10;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: 列。
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: top 1s ease;
  transition: top 1s ease;
  list-style: none;
}

.row .right nav 。 mainMenu li a {
  display: inline-block;
  padding: 15px;
  text-decoration: none;
  color: #5a2a19;
  字體大小: 1.5em;
  font-weight: bold;
}

.row .right nav 。 mainMenu li a:hover {
  color: #e6e8de;
}

.row .right nav .mainMenu .closeMenu {
  字體大小。2em;
  margin: 20px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: 指標。
}

.row .right nav 。 mainMenu .icons i {。
  display: inline-block;
  padding: 12px;
  字體大小: 2.2em;
  color: #5a2a19;
  cursor: 指標。
}

.row .right nav 。 mainMenu .bi-facebook:hover {。
  color: #4267b2;
}

.row .right nav 。 mainMenu .bi-instagram:hover {。
  color: #e1306c;
}
/*# sourceMappingURL=style.css.map */

<! DOCTYPE html> 
<html lang="en"/span>>
  <head>/span>
    <meta charset="UTF-8" />
    < meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"。
      rel="styleheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"/span>
      crossorigin="anonymous"。
    />
    < link rel="styleheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 
    < link rel="styleheet" type="text/css" href="css/style。 css" />
    <title>蜜蜂咖啡館</title>/span>
    <script 
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span>
      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"/span>
      crossorigin="anonymous"。
    ></script>>
    <script src="js/index. js" defer></script> 
  </head> 
  <body> 
    <header> 
      <div class="row"> 
        <div class="col-12 col-md-6 left"/span>> </div>>
        <div class="col-12 col-md-6 right">/span>
          <nav> 
            <div class="openMenu">/span>< i class="bi bi-list"> </i></div>
            <ul class="mainMenu">/span>
              <li>a href="#"/span>> lala</a></li>/span>
              <li>a href="#"> lala</a></li>/span>
              <li>a href="#"> lala</a></li>/span>
              <div class="closeMenu"> < i class="bi bi-x-lg"/span>> </i></div>
              <span class="icons"> 
                <i class="bi bi-facebook"/span>> </i>>
                <i class="bi bi-instagram"> </i>>
              </span> 
            </ul>/span>
          </nav>/span>
        </div>/span>
      </div>/span>
    </header>/span>
  </body>/span>
</html>/span>

uj5u.com熱心網友回復：

如果我們在為.mainMenu打開時將display設定為flex，但在關閉時從不設定，我們不妨將其默認設定為flex。這就解決了最初的問題，但會導致選單默認打開，所以我們可以通過在初始css中添加與關閉時相同的樣式來解決這個問題（在.mainMenu中設定top: -100%;/code>）。

。

const mainMenu = document. querySelector(".mainMenu") 。
const closeMenu = document.querySelector(".closeMenu") 。
const openMenu = document.querySelector(".openMenu") 。
openMenu.addEventListener("click", () =>  {
    mainMenu.style.top = "0"/span>;
});
closeMenu.addEventListener("click", () =>  {
    mainMenu.style.top = "-100%"/span>;
});
.row .left {
  height: 98vh;
  background-color: #5a2a19;
}

.row .right {
  height: 98vh;
  background-color: #ff640b;
}

.row .right nav .openMenu {
  font-size: 3em;
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: 指標。
}

.row .right nav .mainMenu {
  background-color: #ff640b;
  高度。100vh;
  display: flex;
  position: fixed;
  top: -100%;
  right: 0;
  left: 50%;
  z-index: 10;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: 列。
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: top 1s ease;
  transition: top 1s ease;
  list-style: none;
}

.row .right nav 。 mainMenu li a {
  display: inline-block;
  padding: 15px;
  text-decoration: none;
  color: #5a2a19;
  字體大小: 1.5em;
  font-weight: bold;
}

.row .right nav 。 mainMenu li a:hover {
  color: #e6e8de;
}

.row .right nav .mainMenu .closeMenu {
  字體大小。2em;
  margin: 20px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: 指標。
}

.row .right nav 。 mainMenu .icons i {。
  display: inline-block;
  padding: 12px;
  字體大小: 2.2em;
  color: #5a2a19;
  cursor: 指標。
}

.row .right nav 。 mainMenu .bi-facebook:hover {。
  color: #4267b2;
}

.row .right nav 。 mainMenu .bi-instagram:hover {。
  color: #e1306c;
}
/*# sourceMappingURL=style.css.map */ 
<! DOCTYPE html> 
<html lang="en"/span>>
  <head>/span>
    <meta charset="UTF-8" />
    < meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=devicewidth, initial-scale=1. 0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"。
      rel="styleheet"
      integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"/span>
      crossorigin="anonymous"。
    />
    < link rel="styleheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 
    < link rel="styleheet" type="text/css" href="css/style。 css" />
    <title>蜜蜂咖啡館</title>/span>
    <script 
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"/span>
      integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"/span>
      crossorigin="anonymous"。
    ></script>>
    <script src="js/index. js" defer></script> 
  </head> 
  <body> 
    <header> 
      <div class="row"> 
        <div class="col-12 col-md-6 left"/span>> </div>>
        <div class="col-12 col-md-6 right">/span>
          <nav> 
            <div class="openMenu">/span>< i class="bi bi-list"> </i></div>
            <ul class="mainMenu">/span>
              <li>a href="#"/span>> lala</a></li>/span>
              <li>a href="#"> lala</a></li>/span>
              <li>a href="#"> lala</a></li>/span>
              <div class="closeMenu"> < i class="bi bi-x-lg"/span>> </i></div>
              <span class="icons"> 
                <i class="bi bi-facebook"/span>> </i>>
                <i class="bi bi-instagram"> </i>>
              </span> 
            </ul>/span>
          </nav>/span>
        </div>/span>
      </div>/span>
    </header>/span>
  </body>/span>
</html>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>








        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319382.html
      標籤：
      上一篇：React本地手勢處理程式
下一篇：我的角色在滑動，沒有播放影片(Unity3d,Animator,BlendTree,Animation)