漢堡下拉菜單不響應點擊事件

Question

在我的標題中，我寫了 hamburger dd 但我的組件似乎都沒有響應我點擊它們。 不知道為什么會發生這種情況，如果這里有人可以幫助我，我會很高興。 （簡而言之，當我點擊漢堡菜單時沒有任何反應）。

<!DOCTYPE html>
   <html lang="en">
      <head>
         <title>MY CSS WEBSITE</title>
         <link rel="stylesheet" href="style.css">
      </head>
      <body>
         <nav>
            <ul class="topnav" id="dropdownClick">
            
              <li>
                  <a href="#home">Home</a>
              </li>
              <li>
                  <a href="#about">About</a>
              </li>
              <li>
                  <a href="#news">News</a>
              </li>
              <li>
                  <a href="#contact">Contact</a>
              </li>
              <li class="topnav-right">
                  <a href="#signUp">Sign Up</a>
              </li>
              <li class="topnav-right">
                  <a href="#signIn">Sign In</a>
              </li>
              <li class="dropdownIcon">
                  <a href="javascript:void(0)" onclick="dropdownMenu">☰</a>
              </li>
          </ul>
        </nav>     
    <script> 
        function dropdownMenu(){
            console.log(hello);
            var x = document.getElementById("dropdownClick");
            if(ddc.className === "topnav"){
                x.className += " responsive";
            }
            /*change topnav to topnav.responsive*/
            else{
                x.className = "topnav";
            }
        }

    </script>
</body>

Answer 1

你的js有很多問題。 首先，您需要確保變量名稱保持一致。 （您在某些地方使用ddc而不是x 。此外，請確保字符串在引號內，否則，它們將被視為變量。

固定代碼：

<!DOCTYPE html>
   <html lang="en">
      <head>
         <title>MY CSS WEBSITE</title>
         <link rel="stylesheet" href="style.css">
      </head>
      <body>
         <nav>
            <ul class="topnav" id="dropdownClick">
            
              <li>
                  <a href="#home">Home</a>
              </li>
              <li>
                  <a href="#about">About</a>
              </li>
              <li>
                  <a href="#news">News</a>
              </li>
              <li>
                  <a href="#contact">Contact</a>
              </li>
              <li class="topnav-right">
                  <a href="#signUp">Sign Up</a>
              </li>
              <li class="topnav-right">
                  <a href="#signIn">Sign In</a>
              </li>
              <li class="dropdownIcon">
                  <a href="javascript:dropdownMenu()">☰</a>
              </li>
          </ul>
        </nav>     
    <script> 
        function dropdownMenu(){
            console.log("hello");
            var x = document.getElementById("dropdownClick");
            if(x.className === "topnav"){
                x.className += " responsive";
            }
            /*change topnav to topnav.responsive*/
            else{
                x.className = "topnav";
            }
        }

    </script>
</body>

漢堡下拉菜單不響應點擊事件

問題描述

1 個解決方案

解決方案1
0 2022-05-16 17:30:50

漢堡下拉菜單不響應點擊事件

問題描述

1 個解決方案

解決方案1 0 2022-05-16 17:30:50

解決方案1
0 2022-05-16 17:30:50