如何將JS功能添加到側邊選單？-有解無憂

我開始添加一些 JS，但腳本不作業，我不確定我能從這里做些什么來讓它作業。所以代碼應該監聽點擊事件，然后根據選單的位置打開或關閉選單。使用 id 以便如果單擊漢堡選單，選單將 100% 滑出。然后 X 出現在選單上以關閉選單，但是，當我按下漢堡圖示時，選單沒有滑入，并且當它在選單外進行測驗時，X 沒有關閉它。

const menuTrigger = document.getElementById('trigger'); //1
menuTrigger.addEventListener("click", open); //5

const closeMenu = document.getElementById("closer"); //2
closeMenu.addEventListener("click", closed); //3

const sideMenu = document.getElementById('side-menu'); //4

function open() {
  sideMenu.classList.add("show");
}

function closed() {
  sideMenu.classList.remove("show");
}

.show {
  opacity: 1;
  transform: translateX(0%);
  background-color: white;
}

#side-menu {
  position: fixed;
  opacity: 1;
  transform: translateX(100%);
  z-index: 20;
  background-color: #edeae5;
  top: 0;
  right: 0;
  height: 100vh;
  width: 20%;
  transition: transform 0.5s ease-in-out;
}

<div class="nav-right">
  <ul>
    <li> <a href="#nav"> Home </a> </li>
    <li> <a href=# services> Services </a> </li>
    <li> <a href="#team"> Meet The Team</a> </li>
    <li> <a href="#philosophy"> Philosophy</a> </li>
    <li id="trigger"> <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style=" fill:#FFFFFF;"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2                                        5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path></svg>      </li>
  </ul>
</div>

  <aside id="side-menu">
        <div class="side-head">
            <h1 id="side-img">
                CLIK
            </h1>
            <div class="side-right">
                <h1 id="closer">
                    X
                </h1>
            </div>
        </div>
        <div class="side-menu-links">
            <ul>
                <li class="side-menu-indv-link"> <img class="side-link-img" src="serv-black.png" alt=""> <a href="#services">Services</a></li>
                <li class=" side-menu-indv-link"> <img class="side-link-img" src="team-balck.png" alt=""><a href="#team">Meet The Team</a></li>
                <li class=" side-menu-indv-link"> <img class="side-link-img" src="phil-black.png" alt=""><a href="#philosophy">Philosophy</a></li>
            </ul>
        </div>
        <hr>
        <div class="side-menu-contact">
            <div class="side-menu-links">
                <ul>
                    <li class="side-menu-indv-link"> <img class="side-link-img" src="fb2.png" alt=""> <a href="#">Facebook</a></li>
                    <li class="side-menu-indv-link"> <img class="side-link-img" src="instagram2.png" alt=""> <a href="#">Instagram</a></li>
                    <li class="side-menu-indv-link"> <img class="side-link-img" src="whatsapp.png" alt=""> <a href="#">Whatspp</a></li>
                </ul>
                <hr>
            </div>
        </div>
    </aside>

uj5u.com熱心網友回復：

您的主要問題是 CSS 中的 id 選擇器比類選擇器具有更高的特異性.show，因此它本身不能覆寫transform在#side-menu.

將 id 添加到 CSS 中的選擇器中，使其#side-menu.show不僅僅是.show賦予它更高的特異性，因此它的規則可以覆寫#side-menu.

/* do this */
#side-menu.show {
}

/* instead of this */
.show {
}

const menuTrigger = document.getElementById('trigger'); //1
menuTrigger.addEventListener("click", open); //5

const closeMenu = document.getElementById("closer"); //2
closeMenu?.addEventListener("click", closed); //3

const sideMenu = document.getElementById('side-menu'); //4

function open() {
  sideMenu.classList.toggle("show");
}

function closed() {
  sideMenu.classList.remove("show");
}

#side-menu.show {
  opacity: 1;
  transform: translateX(0%);
  background-color: white;
}

#side-menu {
  position: fixed;
  opacity: 1;
  transform: translateX(100%);
  z-index: 20;
  background-color: #edeae5;
  top: 0;
  right: 0;
  height: 100vh;
  width: 20%;
  transition: transform 0.5s ease-in-out;
}

<div class="nav-right">
  <ul>
    <li> <a href="#nav"> Home </a> </li>
    <li> <a href=# services> Services </a> </li>
    <li> <a href="#team"> Meet The Team</a> </li>
    <li> <a href="#philosophy"> Philosophy</a> </li>
    <li id="trigger"> <svg class="hamburger" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style="fill:red;"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2                                        5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path></svg>      </li>
  </ul>
</div>

  <aside id="side-menu">
        <div class="side-head">
            <h1 id="side-img">
                CLIK
            </h1>
            <div class="side-right">
                <h1 id="closer">
                    X
                </h1>
            </div>
        </div>
        <div class="side-menu-links">
            <ul>
                <li class="side-menu-indv-link"> <img class="side-link-img" src="serv-black.png" alt=""> <a href="#services">Services</a></li>
                <li class=" side-menu-indv-link"> <img class="side-link-img" src="team-balck.png" alt=""><a href="#team">Meet The Team</a></li>
                <li class=" side-menu-indv-link"> <img class="side-link-img" src="phil-black.png" alt=""><a href="#philosophy">Philosophy</a></li>
            </ul>
        </div>
        <hr>
        <div class="side-menu-contact">
            <div class="side-menu-links">
                <ul>
                    <li class="side-menu-indv-link"> <img class="side-link-img" src="fb2.png" alt=""> <a href="#">Facebook</a></li>
                    <li class="side-menu-indv-link"> <img class="side-link-img" src="instagram2.png" alt=""> <a href="#">Instagram</a></li>
                    <li class="side-menu-indv-link"> <img class="side-link-img" src="whatsapp.png" alt=""> <a href="#">Whatspp</a></li>
                </ul>
                <hr>
            </div>
        </div>
    </aside>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530739.html

標籤：javascripthtmlcss

上一篇：為什么這個按鈕不能有邊框半徑？

下一篇：我想顯示//隱藏密碼，但它不起作用