如何讓下拉導航欄與 html 和 css 一起使用？

Question

我一直在嘗試為移動視圖制作一個下拉導航欄（鏈接居中），只有 html 和 css（不需要單獨的 javascript 文件，因為項目不是那么密集）。 我想我之前錯過了一些東西，但我再也找不到問題了。 有人可以讓它工作嗎？ 不管你用什么方法。 如果需要更多部分的代碼，請通知我。

html 導航欄部分：

    <!-- Navigation bar section -->
    
   <header class="navbar">
        <div class='nav_container'>

            <ion-icon class="mobile-menu-icon" id="mobile-cta" name="menu-outline"></ion-icon>

            <nav>
                <ion-icon class="mobile-close-icon" id="mobile-exit" name="close-outline"></ion-icon>

                <ul class="primary_nav">
                    <li><a href="#home">Home</a></li>

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

                    <li><a href="#portfolio">Portfolio</a></li>

                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
   </header>

html里面的腳本：

    <script>
        const mobileBtn = document.getElementById('mobile-cta')
            nav = document.querySelector('nav')
            mobileBtnExit = document.getElementById('mobile-exit');

        mobileBtn.addEventListener('click', () => {
            nav.classList.toggle('menu-btn');
        })

        mobileBtnExit.addEventListener('click', () => {
            nav.classList.toggle('menu-btn');
        })
    </script>

scss：

.navbar {
    background: black;


    .navbar_container {
        display: flex;
        place-content: space-between;
    }

    nav{
       display: none;
       position: fixed;
       width: 100%;
       height: 58vh;
       padding: 1em; 
       top: 0;
       z-index: 999;
       background: var(--primary-blue);

       ul {
           margin-top: 2.1em;
       }

       li {
           a {
               display: block;
               padding: .9em;
               font-size: 2em;
               font-weight: 500;
               text-align: center;
               opacity: 0.85;

               &:hover {
                   opacity: 1;
                   transition: all 0.4 ease;
               }
           }
       }
    }
}

 .mobile-close-icon {
    position: absolute;
    right: 0px;
    margin-right: 1em;
    cursor: pointer;
    font-size: 3em;
    color: white;
    opacity: 0.85;

    &:hover {
        opacity: 1;
    }
}


.mobile-menu-icon {
    cursor: pointer;
    color: white;
    position: absolute; 
    right: 0px;
    margin-right: 1em;
    top: 15px;
    width: 40px;
    height: 40px;
} 

Answer 1

看起來您沒有正確定義const聲明。 嘗試如下：

<!-- Option 1: Explictly defined `const` definitions -->
<script>
  const mobileBtn = document.getElementById('mobile-cta');
  const nav = document.querySelector('nav');
  const mobileBtnExit = document.getElementById('mobile-exit');

  mobileBtn.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })

  mobileBtnExit.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })
</script>

<!-- Option 2: "Inlined" const definitions -->
<script>
  const mobileBtn = document.getElementById('mobile-cta'),
  nav = document.querySelector('nav'),
  mobileBtnExit = document.getElementById('mobile-exit');

  mobileBtn.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })

  mobileBtnExit.addEventListener('click', () => {
    nav.classList.toggle('menu-btn');
  })
</script>