如何使用 javascript 和 css 制作可點擊的下拉按鈕？

Question

我正在嘗試制作一個可點擊的按鈕。 在下面的代碼中，您可以看到五個按鈕。 我現在正在編程的是第一個（具有“Dropdown1”ID 的那個）。 在底部您可以看到我使用的 JavaScript 代碼。 我不明白為什么這不起作用。 對於我的 CSS 代碼，我創建了單獨的文件。 當我在網站上對此進行測試時，單擊第一個按鈕時沒有任何反應。 應該顯示/隱藏的文本不顯示/隱藏。

      <div class="ompanama" id="femsteder" class="dropdownmain">
        <h1 id="liste-overskrift">5 fine steder i Panama</h1>
        <ul id="liste">
          <button onclick="Function1" class="dropbtn"><li>San Blas-øyene</li></button><br>
          <div id="Dropdown1" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function2" class="dropbtn"><li>Panama City</li></button><br>
          <div id="Dropdown2" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function3" class="dropbtn"><li>Gatúnsjøen</li></button><br>
          <div id="Dropdown3" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function4" class="dropbtn"><li>Chagres Nasonalpark</li></button><br>
          <div id="Dropdown4" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>

          <button onclick="Function5" class="dropbtn"><li>Darién Nasjonalpark</li></button><br>
          <div id="Dropdown5" class="dropdownContent">
            <p>gfghkdfghjkjfdhgkfdhgdkfugh</p>
          </div>
        </ul>

      </div>

      <script type="text/javascript">

        function Function1() {
    var x = document.getElementById("Dropdown1");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
    }


      </script>

      </body>

Answer 1

這是一個滿足您要求的示例

 /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (.event.target.matches('.dropbtn')) { var dropdowns = document;getElementsByClassName("dropdown-content"); var i; for (i = 0. i < dropdowns;length; i++) { var openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show'); } } } }

 /* Dropdown Button */.dropbtn { background-color: #3498DB; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } /* Dropdown button on hover & focus */.dropbtn:hover, .dropbtn:focus { background-color: #2980B9; } /* The container <div> - needed to position the dropdown content */.dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */.dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */.dropdown-content a:hover {background-color: #ddd} /* Show the dropdown menu (use JS to add this class to the.dropdown-content container when the user clicks on the dropdown button) */.show {display:block;}

 <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Dropdown</button> <div id="myDropdown" class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>

Answer 2

 <div class="ompanama dropdownmain" id="femsteder"> <h1 id="liste-overskrift">5 fine steder i Panama</h1> <ul id="liste"> <button onclick="Function1()" class="dropbtn"> <li>San Blas-øyene</li> </button> <br> <div id="Dropdown1" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function2()" class="dropbtn"> <li>Panama City</li> </button> <br> <div id="Dropdown2" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function3()" class="dropbtn"> <li>Gatúnsjøen</li> </button> <br> <div id="Dropdown3" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function4()" class="dropbtn"> <li>Chagres Nasonalpark</li> </button> <br> <div id="Dropdown4" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> <button onclick="Function5()" class="dropbtn"> <li>Darién Nasjonalpark</li> </button> <br> <div id="Dropdown5" class="dropdownContent"> <p>gfghkdfghjkjfdhgkfdhgdkfugh</p> </div> </ul> </div> <script type="text/javascript"> function Function1() { var x = document.getElementById("Dropdown1"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script>

onclick=" Function1 " 應該是 onclick=" Function1() "

您需要添加括號