Question

我正在使用html和css为大学项目创建一个网站，我正在尝试添加一个下拉菜单。我从w3Schools那里学习了这个教程，但出于某种原因，当我点击按钮打开菜单时，它就不会保持打开状态并立即消失。我尽可能地查看了我的代码，但我看不出它有什么问题。感谢

这是我的css代码：

body{
   background-color: black;
}

header, footer{
  color: black;
  background-color: red;
  padding: 1em;
  text-align: center;
}

.dropbtn{
  background-color: #FF0000;
  color: black;
  padding: 8px;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.confirmbtn {
  margin: 10px 0;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #B20000;
}

.dropdown{
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F6F6F6;
  min-width: 50px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover { background-color: #f1f1f1; }

.show { display: block; }

article{
  margin-left: 200px;
  border-left: 2px solid red;
  border-right: 2px solid red;
  padding: 1em;
  height: 600px;
  background-color: black;
  color: red;
  z-index: 1;
}

form{
   text-align: center;
}

textarea{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

li{
  margin: 10px 0;
}

image{
  height: 100px;
}

nav{
   float: left;
   border-left: 2px solid red;
   max-width: 190px;
   padding: 1em;
   height: 600px;
   background-color: black;
}

以下是我正在处理的网页的HTML代码：

<DOCTYPE! html>

<html>

<head>
<title> Purchase Games </title>
<link rel="stylesheet" href="style.css">

<script>

function submitData(){
   var firstname = document.forms["myForm"]["firstname"].value;
   var lastname = document.forms["myForm"]["lastname"].value;

   if(firstname == ""){
     alert("Please enter something as your first name.");
         return;
   }
   if(lastname == ""){
     alert("Please enter something as your last name. ");
     return;  
   }
}

function myFunction() {
   document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
   if(!event.target.matches('.dropbtn')){
      var dropdowns = document.getElementsByClassName("dropdown-content");
      for(var i = 0; i < dropdowns.length; i++){
         var openDropdown = dropdowns[i];
         if(openDropdown.classList.contains('show')){
             openDropdown.classList.remove('show');
         }
      }
   }
}

</script>
</head>

<body>
<div>

<header><h1> Games Collection </h1></header>

<nav>

<ul>
  <li><a href="index.htm"> Home </a></li>
  <li><a href="casual.htm"> Casual </a></li>
  <li><a href="shooter.htm"> Shooter </a></li>
  <li><a href="platformer.htm"> Platformer </a></li>
  <li><a href="purchase.htm"> Purchase Games </a></li>
</ul>

</nav>

<article> 
  <h1> Purchase Games </h1>
  <form name="myForm">
  First Name: <br>
  <input type="text" name="firstname"> <br> <br>
  Last Name <br>
  <input type="text" name="lastname"> <br> <br>

  <div class="dropdown">
  <button onclick="myFunction()" class="dropbtn"> Select Game Code </button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#"> FIFA </a>
        <a href="#"> FORZA </a>
    <a href="#"> POOL </a>
    <a href="#"> MINE </a>
    <a href="#"> PES </a>
    <a href="#"> CODMW </a>
        <a href="#"> TITAN </a>
    <a href="#"> TITAN2 </a>
    <a href="#"> BATTLE </a>
    <a href="#"> PLANT </a>
    <a href="#"> INSIDE </a>
    <a href="#"> TERRA </a>
    <a href="#"> MANY </a>
    <a href="#"> MARIO </a>
    <a href="#"> RYMAN </a>
  </div>
  </div>
  <br>
  <input type="submit" value="Confirm" class="confirmbtn" onclick="submitData()">
  <br> <br>
  </form>

  <textarea rows="10" cols="50" id="myTextArea">
  Once you purchase an item this is where it will appear
  </textarea>
</article>

<footer><h3> Created by Michael Shepherd (Use this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter" </h3></footer>

</div>
</body>

</html>

Answer 1

按钮的默认行为是提交。所以你需要专门添加

Wire

所以按钮添加

<button type="button">Button</button>

下面的最终代码

<强> HTML

<button type="button" onclick="myFunction()" class="dropbtn"> Select Game Code </button>

以及指向JSfiddle

的链接

请记住在html之前保留你的函数myFunction（）。我看到你的头脑。

Answer 2

在Html中使用选择标记用于多个值

Please refer this link.

Answer 3

.dropdown-content
{
  display : none: // remove this line
}

点击它时，HTML下拉菜单不会保持打开状态

3 个答案: